ReactJS如何在切换列表项上添加活动类并将状态设置为true或false

Question

I've created a togglelist with react where when the user clicks a listitem, it folds out and shows some content. So far so god, but right now it only gets hidden again when the user clicks on another listitem which is ok, but I want to achieve that I can toggle an item, I mean, show and hide when I click on the same item -> eg I want to set the state of the item to true/false on click but I dont know how to do that. Right now I'm just adding an active class, but how to fire two events on a single click, which is to set an active class and change the state at the same time?

here is what I got so far:

export default class ToggleList extends React.Component{
constructor(props){
    super()

    this.state = {
        activeItem: null
        activeState: false // maybe something like this?
    };
}

onItemActive(item) {
    this.setState({activeItem: item})
    this.setState({activeState: !this.state.activeState}) // SOMETHING LIKE THIS?
}    

render() {

    let itemsArray = [
        "Lorem ipsum dolor?", 
        "consectetur adipiscing elit?", 
        "commodo consequat?",
        "Excepteur sint occaecat?"
    ]

    let items = itemsArray.map( (item, index) => {
        return (
          <ToggleListItem key={index} item={item} onItemActive={this.onItemActive.bind(this)} 
          active={item === this.state.activeItem} />
        );
    });        
    return(
        <div className="flex-grid">
            <div className="flex-grid-1">
                <div className="flex-grid-header">
                    <h3>{this.props.title}</h3>
                </div>
            </div>
            <div className="flex-grid-2 faq-list">
                <div className="toggleList">
                    <ul>
                        {items}
                    </ul>
                </div>                    
            </div>
        </div>            

    )
}

}

class ToggleListItem extends React.Component {
constructor(props){
    super()
}
setActive() {
    this.props.onItemActive(this.props.item);
}    
render() {
    let item = this.props.item;
    return (
      <li className={this.props.active ? 'active' : ''} onClick={this.setActive.bind(this)} data-selected={this.props.selected}>
            <div className="item-title">
                <p>{item}</p>
            </div>
            <div className="toggle-icon-wrapper">
                <div className="toggle-icon"></div>
            </div>
            <div className="toggleList-content">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                    Ut enim ad minim veniam
                </p>
            </div>
      </li>
    );
  }
}

Answer 1

Figured it out after a useful hint :-)

this.state = {
    activeItem: null,
    activeState: false
}

onItemActive(item) {
    this.setState({activeItem: item, activeState: !this.state.activeState})
}

active={item === this.state.activeItem ? this.state.activeState : ''}

solved it!