CODEWITHSUNDEEP
javascriptreactjs
Sagar Kodte
Sagar Kodte

Reputation: 3815

How to add class to clicked element only in reactjs?

I have dynamic menu items created from api. I'm calling class change function onClick but class is adding to all menus. I need add class to only clicked element not to whole menu list below is my code.

 {menuSideBar.map(menu => (
            <ListItem
              className={SideMenuClass.join(" ")}
              onClick={this.toggleClass.bind(this)}
              button
            >
              <ListItemIcon className="sidebar_menu_icons">
                <SendIcon />
              </ListItemIcon>
              <Link className="sidebar_menu_links"  to={menu.url != "" ? "/" + menu.url : "#"}>
                <ListItemText inset primary={menu.resourceValue} />
              </Link>
            </ListItem>
          ))}

Below is function

  toggleClass = () => {
    this.setState({ addClass: !this.state.addClass });
  };

  let SideMenuClass = ["sidebar_menu_list"];
    if (this.state.addClass) {
    SideMenuClass.push("selected_sidebar_menu");
 }

Please help how can I add class to only clicked element?

Thank you.

Upvotes: 1

Views: 849

Answers (2)

r g
r g

Reputation: 3901

You can save id's of selected items as array in state

{menuSideBar.map(menu => (
<Item
  className={this.state.ids.includes(menu.id) ? 'active' : ''} 
  onClick={() => {
    this.setState(oldState => ({
      ids: oldState.ids.includes(menu.id) ? oldState.ids.filter(x => x !== menu.id) : [...oldState.ids, menu.id]
    }));
  }} 
  button
/>
))}

Example: https://codesandbox.io/s/4wv6n31q90?fontsize=14

Or if you need only last one selected:

{menuSideBar.map(menu => (
<Item
  className={this.state.lastClicked === menu.id ? 'active' : ''} 
  onClick={() => {
    this.setState({lastClicled: menu.id});
  }} 
  button
/>
))}

Upvotes: 1

xadm
xadm

Reputation: 8418

Store menu item id in the state - then in render (map) check if equals to current element - adjust classes acordingly (apply class for selected only).

Upvotes: 0

Related Questions