CODEWITHSUNDEEP
reactjsstateinfinite-loop
Cobiy
Cobiy

Reputation: 23

How do i setState onClick

Hi so i got my react function with a state that i use to know which componont should be rendered at a given time; here is my main App Function (i only include the function not the rest of class since it is not relevent)

My app function

function App(){
  const [menuState, setMenuState] = useState('journal');
  
  return(
    <>
      <button onClick={setMenuState('journal')}>JOUNRAL</button>
      <button onClick={setMenuState('stats')}>STATS</button>
      <MenuHandler menu={menuState}/>
    </>
  );
}

My MenuHandler function

function MenuHandler(props) {
  const menu = props.menu;
  if(menu==="journal")
    return (<Journal />);
  if(menu==="stats")
    return (<Stats />);
  return (<Journal />);
}

When i do this i get an infinite loop and i can't figure out why.

Upvotes: 0

Views: 709

Answers (1)

marcos
marcos

Reputation: 4510

The problem is that you are calling setMenuState on each render, therefore the infinite loop. You are not assigning it to the onClick handler, pass an arrow function like this to solve it:

<button onClick={() => setMenuState('journal')}>JOUNRAL</button>
<button onClick={() => setMenuState('stats')}>STATS</button>

Upvotes: 2

Related Questions