Getting state from child to parent

Question

how would I get the state from the child so that the parent recognise the state from that child has changed?

const grandParent = () => (
 <parent>
   <child/>
 </parent>
);

const child = () => {
 const [isOpen, setOpen] = useState(false)

  return (
    <button onClick={()=>setOpen(!isOpen)}>Open</button>
 )};

https://reactjs.org/docs/lifting-state-up.html#lifting-state-up — Amir-Mousavi, Apr 08 '20 at 08:14
Does this answer your question? [How to update parent's state in React?](https://stackoverflow.com/questions/35537229/how-to-update-parents-state-in-react) — Amir-Mousavi, Apr 08 '20 at 08:16

score 0 · Answer 1 · answered Apr 08 '20 at 08:29

const grandParent = () => {
   const [ isOpen, setOpen ] = useState(false)

   return (
      <parent>
         <child onHandlerClick={ () => setOpen(!isOpen) }/>
      </parent>
   );
};

const child = (onHandlerClick) => {
    // Note I removed the local state. If you need the state of the parent in the child you can pass it as props. 

  return (
    <button onClick={ () => onHandlerClick() }>Open</button>
   );
};

When you need to keep the state in the parent and modify it inside the children, no matter child state. You pass a handler in props from the parent where it's defined to modify the state. The child execute this handler.

This pattern is called state hoisting.

score 0 · Answer 2 · answered Apr 08 '20 at 08:31

I think I would do something like that:

function GrandParent(){
  return <Parent />
}

function Parent() {
  const [isOpen, setOpen] = useState(false);

  const handleToggle = useCallback(() => {
    setOpen(!isOpen);
  }, [isOpen, setOpen]);


  return <Child handleToggle={handleToggle} />;
}

function Child(props) {

  return <button onClick={() => props.handleToggle()}>Open</button>;
}

score 0 · Answer 3 · answered Apr 08 '20 at 10:46

You can do the following using functional component. Write the Child component as below:

import React, {useEffect, useState} from 'react';

function Child(props) {
    const {setStatus} = props;
    const [isOpen, setOpen] = useState(false);

    function clickHandler() {
        setOpen(!isOpen);
        setStatus(`changes is ${!isOpen}`);
    }
    return (
        <div>
            <button onClick={clickHandler}>Open</button>
        </div>
    );
}
export default Child;

Write the GrandParent component as below:

import React, {useEffect, useState} from 'react';
import Child from "./Child";

function GrandParent(props) {
    function setStatus(status) {
        console.log(status);
    }
    return (
        <div>
            <Child setStatus={setStatus}></Child>
        </div>
    );
}
export default GrandParent;

Use GrandParent component in App.js as below:

import React from "react";
import GrandParent from "./GrandParent";

class App extends React.Component {
  render() {
    return (
        <GrandParent/>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

export default App;

score -1 · Answer 4 · answered Apr 08 '20 at 08:16

You can add props to child and call onChange each time the state is changed

const grandParent = () => (
function handleChange() {}
   <parent>
      <child onChange={handleChange} />
   </parent>
);


const child = (props) => {
   const [isOpen, setOpen] = useState(false);
   function onChange() {
     setOpen(prevOpen => {
        props.onChange(!prevOpen);
        return !prevOpen;
     });
   }
   return (
      <button onClick={()=>setOpen(!isOpen)}>Open</button>
   )};

Marco Caldera · Answer 5 · 2020-04-08T08:31:10.860

You can do something like this:

const grandParent = () => {
    const [isOpen, setOpen] = useState(false)
    return (
        <parent isOpen>
            <child isOpen onChangeState={() => setOpen(!isOpen)} />
        </parent>
    )
}

const child = (props) => {
    return (
        <button
            onClick={() => {
                props.onChangeState()
            }}>
            Open
        </button>
    )
}

Explanation:

You manage the state in the grandParent component and passing it in the parent component (and also at the child if you need it).

The child has a prop which is called when the button is clicked and leads to the update of the grandParent state

Getting state from child to parent

5 Answers5