Pass data from grandchild to parent in React-CodePudding

Hello i have an array called info[] in a grandchild component and i want my parent component when a button is clicked to access the array. I also want a sibling component to have access to it. How is this possible .. i am a bit confused. Should I use use-context ?

Thank you!

CodePudding user response：

If you want to share state among many different components in your application, and you believe that passing State as a prop is "a very long journey" to move around I'm probably you should consider something like use context hook.

Either way what you just described seems like a simple use case witch will not need context.

What you should do is: On the parent you have [state, setState] On the current component pass setStat as a prop to child component and then from child component pass setState as a prop to grandchild component.

Then on grandchild component you can do something like: props.setState(array). So now on the parent component the variable state will have been updated with the value array from the grandchild component.

If you want to pass state to siblings component, and by sibling I assume you mean sibling of the parent, Then you should move the state from parent one level up let's say the parent of the parent.. and do what I've described above.

So create useState high in your component tree, And pass State and setState as well to children as props, setState will be passed as function, so you can call it on the grandchild component or any other component

CodePudding user response：

If I have understand what you are asking it could be something like this.

const GrandChild = ({ setParentInfo }) => {
  const info = [1, 2, 3];

  const handleClick = () => {
    setParentInfo(info);
  };

  return <button onClick={handleClick}>Set parent info</button>;
};

const Sibling = ({ parentInfo }) => {
  return <div>{parentInfo.length}</div>; // Do whatever you need with parentInfo
};

const Parent = () => {
  const [parentInfo, setParentInfo] = useState([]);

  return (
    <div>
      <GrandChild setParentInfo={setParentInfo} />
      <Sibling parentInfo={parentInfo} />
    </div>
  );
};

Here you don't need context because you don't have that much layers but if you need to drill down the props than use a context.