title: ReactJS: How to get state property of another component?
body: <p>There is a main component, which uses a menu component. The menu component is using a state property to save the information about selected menu item. But now I need to get the selected module in the main component. How do I do that?</p>
  
  <pre><code>class Main extends Component {
      doSomething(module) {
          console.log(module) // should get 'targetValue'
  
          // I need to get the info, which module is selected.
          // This info is stored as a state value in the `MainMenu` Component
          // How do I get this information? I can't use the parameter `selectModule` as it is done here.
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;MainMenu /&gt;
                  &lt;Button 
                      onClick={ this.doSomething.bind(this, selectedModule) }
                  /&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>In this component a menu is generated for each module (of <code>modules</code> array). By clicking on one item, this module is stored into <code>module</code> state variable.</p>
  
  <pre><code>class MainMenu extends Component {
      constructor(props) {
          super(props)
          this.state = { 
              module: 'initialValue'
          }
      }
  
      selectModule(module) {
          this.setState({ module })
      }
  
      render() {
          return (
              &lt;Menu&gt;
                  &lt;Menu.Item onClick={ this.selectModule.bind(this, 'targetValue') } &gt;
                      { title }
                  &lt;/Menu.Item&gt;
              &lt;/Menu&gt;
          )
      }
  }
  </code></pre>