To explain the situation. I have a child component that has one chevron that spins on a click. I need to implement from child to parent and to grand parent props data.

<ChildComponent>
<ParentComponent>
<GrandParentComponent>

Inside ChildComponent I have arrow icon ( img )

  const [rotateIcon, setRotateIcon] = useState(false);

  const expandAttachment = useCallback(() => {
    setRotateIcon(!rotateIcon); 
  }, [rotateIcon]);


  <img src="assets/arrow" transform={rotateIcon ? 'rotate(90deg)' : 'rotate(0)'} >

And this is work but.... I need to props rotateIcon state to GrandParentComponent compoentent.

It’s not just the child to the parent. Than child to parent and from parent another level up to. GrandParent.

How do I do that? Is this a good way at all? What are my alternatives? I do not use redux in the system, but api context!

To be clear. All three components are connected. Each to each is a child parent!

CodePudding user response：

As I see it you have 3 options:

1. Store the state props in the parent of all components, which is too complex for this purpose I think.
2. Use Redux to handle state management for the app
3. Use Context API to handle the state management for the app as a global state. You can check out this blog for this: https://www.loginradius.com/blog/engineering/react-context-api/#:~:text=What is Context API?,to parent, and so on.

I do however use and recommend using redux for complex operations like this. When you understand the idea behind redux it becomes very easy to use it.

CodePudding user response：

store the state in the GrandParentComponent and pass through in between components as a prop to reach ChildComponent. Props are meant to be passed from a parent component to a child component(s).

CodePudding user response：

You can do prop drilling i.e, adding a state to <GrandParentComponent/> component and passing it as prop to the child components.

grandparent

export default GrandParentComponent(){
    const [rotateIcon, setRotateIcon] = useState(false);

    // pass the state and setState down to the children
    return <ParentComponent rotateIcon={rotateIcon} setRotateIcon={setRotateIcon}/> 
}

parent

export default ParentComponent({rotateIcon, setRotateIcon}){
    // pass props to child component again
    return <ChildComponent rotateIcon={rotateIcon} setRotateIcon={setRotateIcon}/> 
}

child

export default ChildComponent({rotateIcon, setRotateIcon}){
  const expandAttachment = useCallback(() => {
    setRotateIcon(!rotateIcon); 
  }, [rotateIcon]);

  <img src="assets/arrow" transform={rotateIcon ? 'rotate(90deg)' : 'rotate(0)'} >
}

There’s nothing inherently bad about prop drilling, but it gets harder to manage the state of the app as the complexity increases.

To avoid this we either use React Context or Redux. React Context is baked into react itself, so it's very lightweight and powerful at the same time. It is the perfect fit for a situation like yours.

To keep the answer short, read on how to implement React Context and useContext hook here.