title: How shared state between separate component in React JS?
body: <p>I would like to create Dropdown component.</p>
  
  <p>When I click on the <code>DropdownHandler</code> component, I would like to save the state <code>isOpen</code> which can be <code>true</code> or <code>false</code>. If <code>true</code>, this same <code>state</code> is used by <code>&lt;DropdownContent/&gt;</code> to show the content. And by default, the <code>state</code> <code>isOpen</code> is <code>false</code> in <code>&lt;Dropdown /&gt;</code> component</p>
  
  <p>How can I do that please?</p>
  
  <p>App.jsx</p>
  
  <pre><code>import React from 'react';
  import {Dropdown, DropdownHandler, DropdownContent} from '../../components/Dropdown/Dropdown.jsx';
  
  class HeaderConnected extends React.Component {
  
      constructor(props) {
          super(props);
      }
  
      render() {
          return (
              &lt;div&gt;
                &lt;Dropdown&gt;
                   &lt;DropdownHandler&gt;
                       &lt;Avatar title="Roberto"&gt;&lt;/Avatar&gt;
                   &lt;/DropdownHandler&gt;
                   &lt;DropdownContent&gt;
                       &lt;li&gt;Menu&lt;/li&gt;
                       &lt;li&gt;Settings&lt;/li&gt;
                   &lt;/DropdownContent&gt;
                 &lt;/Dropdown&gt;
              &lt;/div&gt;
          );
      }
  
  }
  
  export default HeaderConnected;
  </code></pre>
  
  <p>Dropdown.jsx</p>
  
  <pre><code>export class Dropdown extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {
              opened: false
          }
      }
  
      render() {
  
          return (
              &lt;div className="DROPDOWN"&gt;
                  {this.props.children}
              &lt;/div&gt;
          );
      }
  
  }
  
  export class DropdownHandler extends React.Component {
  
      constructor(props) {
          super(props);
      }
  
      render() {
  
          return (
              &lt;div className="DROPDOWN__HANDLER"&gt;
                  {this.props.children}
              &lt;/div&gt;
          );
      }
  
  }
  
  export class DropdownContent extends React.Component {
  
      constructor(props) {
          super(props);
      }
  
      render() {
  
          return (
              &lt;div className="DROPDOWN__CONTENT"&gt;
                  {this.props.children}
              &lt;/div&gt;
          );
      }
  
  }
  </code></pre>