.jsx

state = {
        glossary: [
                {
                    name: 'Altcoins',
                    description: 'The “alt” means “alternative” and “coins” mean other cryptocurrencies. These are, in essence, alternative to the Bitcoin, and have a lower value on the market. E.g: Ethereum, Litecoin, Dogecoin.',
                        isOpened: false
                },
                {
                    name: 'Altcoins',
                    description: 'The “alt” means “alternative” and “coins” mean other cryptocurrencies. These are, in essence, alternative to the Bitcoin, and have a lower value on the market. E.g: Ethereum, Litecoin, Dogecoin.',
                        isOpened: false
                },
                {
                    name: 'Altcoins',
                    description: 'The “alt” means “alternative” and “coins” mean other cryptocurrencies. These are, in essence, alternative to the Bitcoin, and have a lower value on the market. E.g: Ethereum, Litecoin, Dogecoin.',
                        isOpened: false
                }
        ]
}

toggle (index) => {
        const glossary = this.state.glossary.map((item, i) => {
                return i === index ? item.isOpened : !item.isOpened
        })
        
        this.setState({glossary:glossary})
}

render() {
        const Item = this.state.glossary.map((item, i) =>
            <div className='glossary-item glossary-item' onClick={() => this.toggle(i)} key={i}>
                <div className="glossary-item__definition">{item.name}</div>
                <div className="glossary-item__description" >{item.description}</div>
            </div>
        )

        return (
            <div className="glossary">
                {Item}
            </div>
        )
    }