How to add active class only to the next element by click in React?

Question

I am new to React. I am creating a custom menu bar. For the Mobile menu, I have 2 dropdown submenu. I want to toggle the sub-items by clicking an arrow. It is already working but when I click any of two arrows, both sub-items opens. I want to open only the next sub-item and close other sub-items if they already opened. See my screenshots

And here my code:

class Header extends Component {

state = {
    mobileNav: false,
    submenuToggle: false
};

toggleMobileNav = () => {
    this.setState({mobileNav: !this.state.mobileNav});
};

submenuToggle = () => {
    this.setState({submenuToggle: !this.state.submenuToggle});
}
render() {  
let navClass = ["justify-content-center mainMenu"];
if(this.state.mobileNav) {
    navClass.push('showMobileNav');
}

let subMenuClass = ["subMenu"];
let submenuToggleClass = ["submenuToggle"]
if(this.state.submenuToggle) {
    subMenuClass.push('showSubMenu');
    submenuToggleClass.push("opened");
}

return (
    <header className="header-area">
        <Container>
            <Row>
                <Col>
                    <Navbar bg="light" expand="lg">
                        <ul className={navClass.join(' ')}>
                            <li>
                                <NavLink exact className="nav-link" activeClassName="activeNav" to="/">Home</NavLink>
                            </li>
                            <li className="hasSubmenu">
                                <NavLink exact className="nav-link" activeClassName="activeNav" to="/about-us">About us</NavLink>
                                <span className={submenuToggleClass.join(' ')} onClick={this.submenuToggle}></span>
                                <div className={subMenuClass.join(' ')}>
                                    <NavLink exact activeClassName="activeNav" to="/corporate-responsibility">Corporate Responsibility</NavLink>
                                    <NavLink exact activeClassName="activeNav" to="/technical-achievements">Technical Achievements</NavLink>
                                </div>
                            </li>
                            <li className="hasSubmenu">
                                <NavLink exact className="nav-link" activeClassName="activeNav" to="/products">Products</NavLink>
                                <span className={submenuToggleClass.join(' ')} onClick={this.submenuToggle}></span>
                                <div className={subMenuClass.join(' ')}>
                                    <NavLink exact activeClassName="activeNav" to="/classic-heat-transfer-papers">Classic Heat Transfer papers</NavLink>
                                    <NavLink exact activeClassName="activeNav" to="/novelty-transfer-papers">Novelty Transfer papers</NavLink>
                                </div>
                            </li>
                            <li>
                                <NavLink exact className="nav-link" activeClassName="activeNav" to="/services">Services & Capabilities</NavLink>
                            </li>                                
                        </ul>
                    </Navbar>
                </Col>
            </Row>
        </Container>
    </header>
  )
}
}
export default Header;

Please help me. thank you!

Answer 1

Have an ID to each menu item and have it in your state so that whenever a menu item is clicked u'll get to know the item and open that particular item and close the rest.

inside state add an another key

active_menu_id : 0


submenuToggle = (e) => {
    this.setState({
         active_menu_id : e.target.id,
         your other stuff
    });
}

in render method just keep a check for active_menu id and expand the tab depending on it

Answer 2

In your case, with only two options of drop menus you can have 2 different state hooks. If user clicks one arrow then the state changes to true (setIsAboutUs(true)). If the state is true then the menu opens.