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;
You can use
useState
for thatIn your function (before the return) write this
You need to import
useState
fromreact
And on the button write thisYou can also use
NavLink
fromreact-router-dom
which has a propactiveClassName
(but this will put the class on the link not on the button)