React Js / Active item on menu with state

Question

Hello I would like to know how I could create a state for when an item from my menu is active (when a user clicks)

code:

const MenuDashBoard = () => {
  const toggleMenu = useSelector(state => state.menuStatus.menuStatus);
  return (
      <GridMenu desktop={toggleMenu ? '240px' : '75px'} mobileGrid = {toggleMenu ? '31.25%' : '12.5%'} wdscreen = { toggleMenu? '80%' : '2%'}>
        <SidebarNav>
          <SidebarUl> 

            <SideBarLi >

              <SideBarA>
                <Icon name='home' size='large' style={{ marginRight: '10px', padding: 0, opacity:'1', height:' 1em'}} /> 
                <p style={{display: toggleMenu ? 'block' : 'none'}} >Home</p>
              </SideBarA>

            </SideBarLi>

            <SideBarLi >

              <SideBarA>
                <Icon name='home' size='large' style={{ marginRight: '10px', padding: 0, opacity:'1', height:' 1em'}} /> 
                <p style={{display: toggleMenu ? 'block' : 'none'}}>Home2</p>
              </SideBarA>

            </SideBarLi>

          </SidebarUl>
        </SidebarNav>
      </GridMenu>
  );
}

Basically I wanted to create something with state to save the active item in order to enable some css

Answer 1

Give name to each of them and write an onClick for those, as your code is incomplete, it's hard for me to do so. Here is the same type code you want:

Code :

state={
        username:'',//it tracks which element is being pressed
        user:['maifeeulasad','maifee']    
    }

    constructor(props){
        super(props);
        this.userList=this.userList.bind(this);
        this.setUsername=this.setUsername.bind(this);
    }

    setUsername = (e) =>{
        this.setState({username:e.target.getAttribute('name')})
    }

    userList = () =>{
        return this.state.user.map((u)=>{ 
            console.log(u);
            return <li onClick={this.setUsername} id={u} name={u}>{u}</li>; 
        }); 
    }

    render() {
    if(this.state.username==='' )
    {
        return (
            <div>
                Developer list:
                {this.userList()}
            </div>
        );

    }
    else
    {
        return (
            <div>
                Developer list:
                {this.userList()}
                <a href={"https://github.com/"+this.state.username}>View My GitHub Profile</a>
            </div>
            );
    }
}

sandbox

In this code :

setUsername = e => {
    this.setState({ username: e.target.getAttribute("name") });
  };

To achieve that, let's define a css first 'colo'

Now in our code just add className={this.state.username === u ? "colo" : ""} in return <li onClick={this.setUsername} id={u} name={u}>{u}</li>;, it will do your job. Check out the updated sandbox, it should work.

If works, don't forget to tick and accept as answer.