切换类添加类但不删除它

Question

I've got got a sidebar which shows a list of menu items. Some of those menu items have children so I have an expand button which adds a class and those child pages show via css.

{
    item.childPages ? <button className = { i === this.state.activeId ? "active child-nav-control" : "child-nav-control" } onClick={() => this.setActiveElement(i)}></button> : null
}

I've managed to add the class on each individual item but when I click it a second time the class isn't removed. Can anyone see where I'm going wrong?

class Sidebar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeId: null
    }
    this.setActiveElement = this.setActiveElement.bind(this);
  }

  setActiveElement(id){
    this.setState({activeId: id});
  }

  render(props) {
    const data = this.props.nav.contentfulNavigation.navigationItem

    return (
      <Menu>
          <ul id="mainnav">
            <li><Link className="logo" to="/"><img src={logo} alt="Shell Logo" /></Link></li>
            {data.map((item, i) =>
              <li key={i} className={item.childPages ? item.title.replace(/\s+/g, '-') + ' has-child-wrap' : item.title.replace(/\s+/g, '-')}>
                <Link partiallyActive={true} className={item.childPages ? 'has-child' : null}
                      to={item.slug}
                      activeClassName={item.slug === '/' ? null : 'active'}>
                      {item.menuTitle}
                </Link>
                {item.childPages ? <button className={i === this.state.activeId ? "active child-nav-control" : "child-nav-control"} onClick={() => this.setActiveElement(i)}></button> : null}  
                {item.childPages && <Nav nav={item.childPages} />}
              </li>
            )}
          </ul>
      </Menu>
    )
  }
}

const Nav = ({ nav }) => {
    //console.log(nav)
    return (
      <ul className="children">
        {nav.map((node) => (
          <li key={node.id}>
            <Link partiallyActive={true} activeClassName="active child" to={node.slug}>{node.menuTitle}</Link>
          </li>
        ))}
      </ul>
    )
}

export default Sidebar

Answer 1

To make this work you have to check in setActiveElement if the currently active id is the one that was clicked (again) and set it null in this case:

setActiveElement(id){
    this.setState(({activeId}) => ({activeId: id === activeId ? null : id}));
}

Answer 2

If I've understood correctly, you want to click the button initially for it to have the 'active' class applied, and the children to show; then if you click again you want it to collapse and the 'active' class removed?

If that's right, what you have at the moment means if you click another item, that becomes the active item and the class is removed from the previous - this only allows one 'active' item and one expanded submenu.

Given that, all you need is if the clicked item is already the active item, set activeId to null instead:

  setActiveElement(id){
    let newId = ( id === this.state.activeId ? null : id );
    this.setState({activeId: newId});
  }