ReactJs - How can I add an 'active' class to the nav bar buttons depending on which page is currently being used?

Question

I'm new to React, after following numerous YouTube tutorials I still can't quite grasp how to go about this, I think it involves using "states" but every attempt has failed so far. I'm pulling my hair out!

So far my Nav Bar works perfectly, clicking the button will take you to the other pages no problem.

However, I think its missing the feature of showing which page you are currently on by underlining a button or making it bold or something.

Just wondering how you guys would go about this? I feel this is a simple concept that I'm failing to do.

Here is the Nav Bar:

function NavBar() {

  {/* Variable to store the name which page has just been clicked, which by default is the home page */}
  const isActive = "home";


  return (    
    <nav className="landing-page__nav-bar nav-bar">
    <ul className="nav-bar__list">
    {/* Button to Home Page */}
      <Link to ='/'><li><a data-page="home" className="home-link">
        <button href="landingpage" className={` ${isActive === "home" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("home")}>Home</button>
        </a></li>
      </Link>
    {/* Button to Portfolio Page */}
      <Link to ='/portfolio'><li><a data-page="portfolio" className="portfolio-link">
        <button className={` ${isActive === "portfolio" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("portfolio")}>Portfolio</button>
        </a></li>
        </Link>
    {/* Button to Artwork Page */}
      <Link to ='/artwork'><li><a data-page="doodles" className="doodles-link">
      <button className={` ${isActive === "artwork" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("artwork")}>Artwork</button>
        </a></li></Link>
      {/* Button to Photography Page */}
      <Link to ='/photography'><li><a data-page="photography" className="photography-link">
        <button className={` ${isActive === "photography" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("photography")}>Photography</button>
        </a></li></Link>
      {/* Button to CV Page */}
      <Link to ='/cv'><li><a data-page="cv" className="cv-link">
      <button className={` ${isActive === "cv" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("cv")}>CV</button
        ></a></li></Link>
      {/* Button to About Page */}
      <Link to ='/about'><li><a data-page="about" className="about-link">
      <button className={` ${isActive === "about" ? 'btn__nav-basr-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("about")}>About</button>
        </a></li></Link>
      {/* Button to Contact Page */}
      <Link to ='/contact'><li><a data-page="contact" className="contact-link">
      <button className={` ${isActive === "contact" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("contact")}>Contact</button>
        </a></li></Link>     

    </ul>
  </nav>

  );
    }

export default NavBar;

Here is the function I was going to use within the Nav Bar to add an 'active' class to a button:

function ChangeActiveButton(selectedButton) {
    //What can i do here?
}

export default ChangeActiveButton;

Answer 1

You can use useState for that

In your function (before the return) write this

const [isActive,setActive] = useState("home")

You need to import useState from react And on the button write this

 <button className={` ${isActive === "contact" ? 'btn__nav-bar-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => setActive("contact")}>Contact</button>

You can also use NavLink from react-router-dom which has a prop activeClassName (but this will put the class on the link not on the button)