React - How do I pass a state two tiers up, and then down to another child?

Question

I have a state from <Left Child 2/> that I wish to pass to <Right Child 2/>. They both have one parent(the one above), and refer to the same parent container.

The structure is something like this:

     <ParentContainer />
        |            |
        |            |
        v            v
<Left Child 1/> <Right Child 1/>
        v            v
<Left Child 2/> <Right Child 2/>

How do I pass data not one, but two tiers up in React, and then propagate it down another tree from the same Parent?

Answer 1

Add a function and default internal state in your parent component. Then pass down the function into <Left Child 2/> and call the function there which will set the passed data as a state of the parent component, which you can pass down to <Right Child 1/> with props.

The key here is to have a single source of truth for your data, which should be the parent component.