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.

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

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/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";

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;