React - function working only on second click why?

Question

My column where I added OnClick function when I click

<Col onClick={()=>optionSelected("usermanagement")}
            className={
              currentSelection === "usermanagement" ? "selectedOp" : "option"
            }
            tabIndex="-1"
            style={{ cursor: "pointer" }}
          >

Well, This may look dumb way to access the route but I want this for some other purpose .

 function optionSelected(optionName) {
    if (optionName === "usermanagement") {
      setCurrentSelection("usermanagement");
      history.push("/" + currentSelection);
    }
    if (optionName === "foodcatalog") {
      setCurrentSelection("foodcatalog");
      history.push("/" + currentSelection);
    }
    if (optionName === "promotions") {
      setCurrentSelection("promotions");
      history.push("/" + currentSelection);
    }
    if (optionName === "tickets") {
      setCurrentSelection("tickets");
      history.push("/" + currentSelection);
    }
    if (optionName === "reports") {
      setCurrentSelection("reports");
      history.push("/" + currentSelection);
    }
   }

Why I can access the page (history push) only on the second click ?

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. — Community
– Community Bot, Commented Sep 8, 2021 at 9:22

Dan James · Accepted Answer · 2021-09-04 08:37:41Z

1

Because react bundles setState calls together asynchronously. So by the time the code reaches history.push, currentlySelection hasn't changed yet.

change history.push("/" + currentSelection); to history.push("/" + "reports"); (or whatever route you are trying to get to)

answered Sep 4, 2021 at 8:37

Dan James

5794 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manikandan Over a year ago

Thanks a lot... Thought the dynamic way would be a pro way to call the route.. lol !

Red Baron Over a year ago

if you want to do it like this then you can put history.push("/" + currentSelection); in a useEffect and have the state as dependency and it'll change route once state updates. or write a function that does the same code and just call it with a different arg

Collectives™ on Stack Overflow

React - function working only on second click why?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related