Как сделать, чтобы класс при клике добавлялся только элементу, по которому кликаешь?

Question

[Вадим Свердлик]

У меня стоит аккордеон на сайте, хочу, чтобы при клике на .card-header класс active добавлялся только тому .card-header, по которому кликнули. Сейчас реализовано так, добавляется всем элементам .card-header:

constructor(props) {
        super(props);
        this.state = {
            active: false
        }
    }

 toggle(){
        this.setState({active: !this.state.active});
}

<Accordion.Toggle as={Card.Header} eventKey={index} className={(this.state.active ? "active" : "")} onClick={e =>this.toggle()}>{item.name}</Accordion.Toggle>

Comments

[Alice Smith]

Мождо полный код компонента?

[Вадим Свердлик]

class CategoryAccordion extends React.Component {

    constructor(props) {
        super(props);

        
     

        this.state = {
            active: false
        }

    }
    

    toggle(e){
        this.setState({active: !this.state.active});
    }

    render() {

       

        return (

            <Accordion activeKey={this.state.activeKey} onSelect={onSelectHandler}>
                {
                    this.root.map((item, index) => {

                            const children = this.props.categories.filter((subItem) => (subItem.parentId == item.id)).sort(this.sortCategory);

                            return (
                                <Card key={index} className={(this.state.active ? "active" : "")} onClick={e => this.toggle(e)}>

                                    <Accordion.Toggle as={Card.Header} eventKey={index} >
                                        {item.name}
                                    </Accordion.Toggle>

                                    <Accordion.Collapse eventKey={index}>
                                        <Card.Body>
                                            <ListGroup className={"list-group-flush"}>
                                                {
                                                    children.length == 0 &&
                                                    <CategoryLink item={item} currentItem={this.props.currentCategory}/>
                                                }
                                                {
                                                    children.length > 0 &&
                                                    children.map((subItem, index) => (
                                                        <CategoryLink item={subItem} currentItem={this.props.currentCategory} key={index}/>
                                                    ))
                                                }

                                            </ListGroup>
                                        </Card.Body>
                                    </Accordion.Collapse>

                                </Card>
                            )
                        }
                    )
                }
            </Accordion>
        )

    }
}

export default CategoryAccordion;