CODEWITHSUNDEEP
javascripthtmlcssreactjsonclick
squish
squish

Reputation: 1116

React - loading the page calls all onClicks at once, then clicking on a button does nothing

I'm quite new to react, I have a good understanding of HTML and CSS/SASS so I've not run into any problems until now.

I want to highlight a button on the nav bar depending on which page the user is on at the time.

I've tried to add a simple onClick to the buttons that will call a function, passing in a string telling it that "home" has just been clicked or "contact" for example.

I've added an alert() to the function so I can see that the buttons been pressed and method is being called;

However, when the page is loaded up, it calls every buttons method and gives me an alert for every button, then continues to load up as usual and clicking the buttons seems to be as if I never added an onClick in the first place.

Can anybody tell me where I am going wrong with this simple function? I've spent the past 5 hours pulling my hair out.

Thank you!

NavBar.js:

function NavBar() {

const isActive = "home";


return (    
  <nav className="landing-page__nav-bar nav-bar">
  <ul className="nav-bar__list">
    <Link to ='/home'><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>
    <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>
    <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>
    <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>
    <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>
    <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>
    <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;

ButtonClick.js (method to update the current page):

import NavBar from './Nav-bar';

function ChangeActiveButton(selectedButton) {

    alert(selectedButton)
    NavBar.isActive = toString(selectedButton);
}

export default ChangeActiveButton;

Upvotes: 0

Views: 56

Answers (2)

Rau&#241;&#241;
Rau&#241;&#241;

Reputation: 411

onClick tag requires a function, not to call a function. If you type buttonWasClicked("contact") the function will be called when the DOM is ready.

Instead you need to write {() => buttonWasClicked("contact")}

Upvotes: 1

ApplePearPerson
ApplePearPerson

Reputation: 4439

You're calling the function when rendering and passing the result of that function to the button's onClick. Instead, you should give the onClick an anonymous function that when executed calls the function you want with the proper parameter.

<button className={` ${isActive === "about" ? 'btn__nav-basr-btn active-link' : 'btn__nav-bar-btn'}`} onClick={() => buttonWasClicked("about")}>About</button>

Upvotes: 1

Related Questions