Passing functions/state variables to a React Component (Arrow notation)

Question

I have a React component that is declared in the arrow-function notation. This component has a child component that is supposed to change the state of the ParentComponent. How can I achieve that? And how would it look like if we passed the change of the state as a function (changeState in this case)?

const ParentComponent = () => {
    const [myState, setMyState] = useState(false);
    const changeState = () => setMyState(!myState);

    return(
        <ChildComponent /> // pass the state variables
    );
}

const ChildComponent = () => { // receive the state variables
    // change state of parent component
}

Pass props to ChildComponent? Why does the specific function notation matter? — jonrsharpe
– jonrsharpe, Commented Nov 8, 2021 at 15:31
I don't know how it would look like to execute a function call of a props in the child component — Luca
– Luca, Commented Nov 8, 2021 at 15:33
A lot of people ask this question about "changing the parent component from a child"... The truth is that you should not do that. The "react" way of doing this is to "share" some kind of state using a "store" like react-redux. Otherwise you will find out soon or later that you shot yourself in the foot. — Jonathan Alfaro
– Jonathan Alfaro, Commented Nov 8, 2021 at 15:33
Just add props parameter to your childcomponent and call it as props.func() — mkemaltas
– mkemaltas, Commented Nov 8, 2021 at 15:34
How do you normally execute a function call? It looks just the same. See e.g. reactjs.org/docs/lifting-state-up.html. — jonrsharpe
– jonrsharpe, Commented Nov 8, 2021 at 15:34

Andrew · Accepted Answer · 2021-11-08 15:37:56Z

2

To pass state changes to the child class you can just pass the functions as attributes to the child. This works for any function and you can even just pass in setMyState if you would like into the child function

 const ParentComponent = () => {
    const [myState, setMyState] = useState(false);
    const changeState = () => setMyState(!myState);

    return(
        <ChildComponent 
            changeState={changeState}
        /> // pass the state variables
    );
}

const ChildComponent = ({changeState}) => { // receive the state variables
    // change state of parent component

    // you can use changeState here and 
    // it will update the parent component and rerender the page
}

answered Nov 8, 2021 at 15:37

Andrew

1,3485 gold badges18 silver badges33 bronze badges

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

Comments

Shahzaib · Accepted Answer · 2021-11-08 15:37:20Z

1

You can pass functions as a prop as well to child components. Try passing the changeState function to the child component like this

const ParentComponent = () => {
    const [myState, setMyState] = useState(false);
    const changeState = () => setMyState(!myState);

    return(
        <ChildComponent handleChange={changeState} /> // pass the state variables
    );
}

const ChildComponent = ({handleChange}) => { // receive the state variables
    // change state of parent component by simply calling 
    // handleChange as a normal function 

}

answered Nov 8, 2021 at 15:37

Shahzaib

2882 silver badges8 bronze badges

Collectives™ on Stack Overflow

Passing functions/state variables to a React Component (Arrow notation)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related