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

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related