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 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)