How to share state between state between React sibling component functions?

Question

How do I use share some state data in one React component function with another? Both are children of yet another component. (I am a React newbie so perhaps somewhat naively I tried: 1) defined an exported const from my ap.jsx with a structure whose properties were the state. Seems like when queried the structure was returning null. 2) cannot use props as that's one way one from parent to child).

Answer 1

I suppose the best answer is: it depends.

However, the most simple solution would be to hold the value in a parent component and pass it down to both child components through props.

If you want to skip few nesting levels, you could reach for React context or state management tools like redux but that is already a heavy tool. Hard to say what exactly is best in your case with context you shared so far.

Answer 2

I agree with akds that the best approach depends on the specific details of your scenario, but that the recommended approach would be to have the parent manage the state, unless the complexity of your scenario dictates otherwise.

Here is a rather trivial example with a component class as the parent to manage the state based on an action taken in the one of the child components, with the two child components being stateless components. The key is that the parent passes down a callback function to the child for whatever event in the child relates to the state change that needs to be handled. In this example, that is just a click on one of the child components, but it could be anything.

Example on CodePen.

Here is the code from the CodePen example:

HTML:

<div id="example"></div>

JS:

import * as React from "https://cdn.skypack.dev/[email protected]";
import * as ReactDOM from "https://cdn.skypack.dev/[email protected]";

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.state = {child1Selected:false};
    }


    handleChild1Click(){
        this.setState({child1Selected:!this.state.child1Selected});
    }

    render(){
        return (
            <div>
                <Child1 
                  child1Selected={this.state.child1Selected} 
                  onClick={() => {this.handleChild1Click();}} 
                  style={{width:"100px", height:"100px", backgroundColor:"blue"}} 
                  />
                <Child2 
                  child1Selected={this.state.child1Selected} 
                  style={{width:"100px", height:"100px", backgroundColor:"lightgrey"}} 
                  />
            </div>
        );
    }
}

function Child1(props){
    return (
      <div onClick={props.onClick} style={props.style}>
        {props.child1Selected ? "I am Selected" : "I am NOT Selected"}
      </div>
    );
}

function Child2(props){
    return (
      <div style={props.style}>
        {props.child1Selected ? "My Sibling is Selected" : "My Sibling is NOT Selected"}
      </div>
    );
}


let loadApp = ReactDOM.render(<Parent/>, document.getElementById('example'));
loadApp;

Answer 3

If you want to share state, you can use Context concept or Redux which is a library for sharing library.

Here is some useful link for you.

• https://redux.js.org/
• https://reactjs.org/docs/context.html