How To Add Active Class To Clicked Item In Reactjs

I have an array of objects that contain keypair values for the navbar links, I have mapped the array to list and rendering it successful, but when I try to add class to only active

Solution 1:

Instead of trying to manipulate the DOM manually, you could keep a piece of state called e.g. activeLink that stores the id of the active link that you use that to apply the class to the active link in the render method.

Example

classSideNavbarextendsReact.Component {
  state = {
    links: [
      {
        id: 1,
        name: "Link1",
        to: "/cms",
        className: "side_nav_item"
      },
      {
        id: 2,
        name: "Link2",
        to: "/cms",
        className: "side_nav_item"
      },
      {
        id: 3,
        name: "Link3",
        to: "/cms",
        className: "side_nav_item"
      },
      {
        id: 4,
        name: "Link4",
        to: "/cms",
        className: "side_nav_item"
      }
    ],
    activeLink: null
  };

  handleClick = id => {
    this.setState({ activeLink: id });
  };

  render() {
    const { links, activeLink } = this.state;

    return (
      <div>
        {links.map(link => {
          return (
            <divkey={link.id}><ul><lionClick={() => this.handleClick(link.id)}
                  className={
                    link.className +
                    (link.id === activeLink ? " active_item" : "")
                  }
                >
                  {link.name} {link.id === activeLink && "active!"}
                </li></ul></div>
          );
        })}
      </div>
    );
  }
}

ReactDOM.render(<SideNavbar />, document.getElementById("root"));

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><divid="root"></div>

Solution 2:

The issue is this line of code: const currentClass = document.getElementsByClassName('side_nav_item');

is grabbing all your HTML elements with the side_nav_items CSS class and in your case this is all your side nav links. You probably want to use:

let element = document.getElementById(id);

to just get the side nav element which was clicked identified by it's id. Then you can use an element.classList.add('active_item'); to add the active_item css class to the selected side nav item.

Hopefully that helps!