React Hook : Send data from child to parent component

Question

I'm looking for the easiest solution to pass data from a child component to his parent.

I've heard about using Context, pass trough properties or update props, but I don't know which one is the best solution.

I'm building an admin interface, with a PageComponent that contains a ChildComponent with a table where I can select multiple line. I want to send to my parent PageComponent the number of line I've selected in my ChildComponent.

Something like that :

PageComponent :

<div className="App">
  <EnhancedTable />         
  <h2>count 0</h2>
  (count should be updated from child)
</div>

ChildComponent :

 const EnhancedTable = () => {
     const [count, setCount] = useState(0);
     return (
       <button onClick={() => setCount(count + 1)}>
          Click me {count}
       </button>
     )
  };

I'm sure it's a pretty simple thing to do, I don't want to use redux for that.

Answer 1

A common technique for these situations is to lift the state up to the first common ancestor of all the components that needs to use the state (i.e. the PageComponent in this case) and pass down the state and state-altering functions to the child components as props.

Example

const { useState } = React;

function PageComponent() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1)
  }

  return (
    <div className="App">
      <ChildComponent onClick={increment} count={count} />         
      <h2>count {count}</h2>
      (count should be updated from child)
    </div>
  );
}

const ChildComponent = ({ onClick, count }) => {
  return (
    <button onClick={onClick}>
       Click me {count}
    </button>
  )
};

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

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Answer 2

You can create a method in your parent component, pass it to child component and call it from props every time child's state changes, keeping the state in child component.

const EnhancedTable = ({ parentCallback }) => {
    const [count, setCount] = useState(0);
    
    return (
        <button onClick={() => {
            const newValue = count + 1;
            setCount(newValue);
            parentCallback(newValue);
        }}>
             Click me {count}
        </button>
    )
};

class PageComponent extends React.Component { 
    callback = (count) => {
        // do something with value in parent component, like save to state
    }

    render() {
        return (
            <div className="App">
                <EnhancedTable parentCallback={this.callback} />         
                <h2>count 0</h2>
                (count should be updated from child)
            </div>
        )
    }
}

Answer 3

为了使事情变得超级简单，您实际上可以将状态设置器共享给子级，现在他们可以设置其父级的状态。

示例：假设有以下四个部分，

function App() {
  return (
    <div className="App">
      <GrandParent />
    </div>
  );
}

const GrandParent = () => {
  const [name, setName] = useState("i'm Grand Parent");
  return (
    <>
      <div>{name}</div>
      <Parent setName={setName} />
    </>
  );
};

const Parent = params => {
  return (
    <>
      <button onClick={() => params.setName("i'm from Parent")}>
        from Parent
      </button>
      <Child setName={params.setName} />
    </>
  );
};

const Child = params => {
  return (
    <>
      <button onClick={() => params.setName("i'm from Child")}>
        from Child
      </button>
    </>
  );
};

因此，祖父母组件具有实际状态，并且通过将setter方法（setName）共享给父母和孩子，他们可以获得更改祖父母状态的访问权。

您可以在以下沙箱中找到工作代码， https：//codesandbox.io/embed/async-fire-kl197