Passing data between two sibling React.js components

Question

I have two instances of a component (a search field) on a page, with a second component (a button that makes server calls) between them, as such:

Answer 1

I created a jsfiddle with an example of how to share a variable between two components using a parent component.

class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {shared_var: "init"};
    }

    updateShared(shared_value) {
        this.setState({shared_var: shared_value});
    }

    render() {
        return (
            

                
                
                
 The shared value is {this.state.shared_var} 
            
        );
    }
}

class CardSearch extends React.Component {
    updateShared() {
        this.props.updateShared('card');
    }

    render() {
        return (
            
            card
            
        );
    }
}

class RunOnServer extends React.Component {
    updateShared() {
        this.props.updateShared('run');
    }

    render() {
        return (
            
            run
            
        );
    }
}


ReactDOM.render(
  ,
  document.getElementById('container')
);