CODEWITHSUNDEEP
javascriptreactjsreact-hooks
Arwa
Arwa

Reputation: 166

React - update use state from another component

I want to update this use state so that when a button in <FirstPage /> component is clicked the state should be updated.
I'm kinda stuck what is the best way to achieve this?

const SignUp = () => {
    const [display, setDisplay] = useState(true);
    const onClick = () => {
        setDisplay(false);
    };

    return (
        <>
            { display? <FirstPage changeState={onClick}/> : <SecPage/> }    
        </>
    );
}

Upvotes: 0

Views: 902

Answers (1)

Mortr0n
Mortr0n

Reputation: 26

Another way to do this would be to pass the setDisplay item to FirstPage and then set it in the FirstPage component.

as in

    return (
          <>
            { display? <FirstPage setDisplay={setDisplay}/> : <SecPage/> }    
          </>
     );

then you could change the display state in the FirstPage component using the onclick for it to call a function to setDisplay(false) something like below. you would then call the function using onClick={buttonClicked()}

   const buttonClicked = () => {
        setDisplay(false);
   }

Upvotes: 1

Related Questions