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

Answer 1

To make things super simple you can actually share state setters to children and now they have the access to set the state of its parent.

example: Assume there are 4 components as below,

function App() {
  return (
    

      
    
  );
}

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

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

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

so grandparent component has the actual state and by sharing the setter method (setName) to parent and child, they get the access to change the state of the grandparent.

you can find the working code in below sandbox, https://codesandbox.io/embed/async-fire-kl197