Add class / remove class from li item in navbar (React)

Question

I am trying to add 'active' class name to clicked navbar item dynamically and remove the 'active' class name from class respectively. I am using bootstrap so 'active' class name change the color of the li item.


class NavBar extends React.Component {
  render() {
    return ( 
      <nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="#">Blog - App</a>
          </div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="/main">Home</a></li>
            <li><a href="/chat">Chat</a></li>
            <li><a href="/about">About</a></li>
          </ul>
        </div>
      </nav>
    );
  };
};

export default NavBar

I am new with React, do i need to handle onClick with a function? I will appreciate any idea or code suggestions.

Why don't you use the bootstrap react components? They should have everything built in for you https://react-bootstrap.github.io/components/navbar/ — szczocik, Oct 23 '20 at 08:35

score 0 · Accepted Answer · answered Oct 23 '20 at 08:47

In react you can do it like this:

By passing in a prop which determines the toggle of className.

const NavBar = props => {
    return ( 
      <nav className="navbar navbar-inverse">
        <div class="container-fluid">
          <div className="navbar-header">
            <Link className="navbar-brand">Blog - App</Link>
          </div>
          <ul className="nav navbar-nav">
            <li className={props.active ? 'active' : ''}><Link to="/main">Home</Link></li>
            <li><Link to="/chat">Chat</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </div>
      </nav>
    );
};

export default NavBar

By State But then in this case wouldn't be appropriate because nothing is going to click it.

import {useState} from 'react';
const NavBar = () => {
  const [active, setActive] = useState('');
  clickToChange () {
   setActive(true);
  }
  render() {
    return ( 
      <nav className="navbar navbar-inverse">
        <div class="container-fluid">
          <div className="navbar-header">
            <Link className="navbar-brand">Blog - App</Link>
          </div>
          <ul className="nav navbar-nav">
            <li className={state.active ? 'active' : ''}><Link to="/main">Home</Link></li>
            <li><Link to="/chat">Chat</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </div>
      </nav>
    );
  };
};

export default NavBar

In your particular use case I'd probably suggest instead detecting the route

See example here: React Router v4 - How to get current route?

score 0 · Answer 2 · answered Oct 23 '20 at 08:51

yes, you could use onClick handler, but then again you will have to rehydrate it from the window.location;

class NavBar extends React.Component {

  render() {
    state = { active : null }
    
    componentDidMount(){
       /** you might as well check if location.pathname includes what you are looking 
        for before just setting it to state, assuming that there wont be anything 
        extra; skipping that for simplicity*/
       this.setState(window.location.pathname);
     }
   
    handleClick = (activeLink) => {
       this.setState(activeLink);
     }
    
    return ( 
      <nav className="navbar navbar-inverse">
        <div className="container-fluid">
          <div className="navbar-header">
            <a className="navbar-brand" href="#">Blog - App</a>
          </div>
          <ul className="nav navbar-nav">
            <li onClick={()=>this.handleClick('/main')} className={`{this.state.active==='/main'? 'active':''}`}><a href="/main">Home</a></li>
          </ul>
        </div>
      </nav>
    );
  };
};

export default NavBar

A more graceful implementation would be using a client side routing library like react-router which gives you Link components like NavLink which attaches active classnames automatically.

Add class / remove class from li item in navbar (React)

2 Answers2

In your particular use case I'd probably suggest instead detecting the route