title: React: Get state of children component component in parent
body: <p>I have this container where  and  is not placed in the same level. How can I get the state of the Form when I click on the button (which is placed on the parent) ?</p>
  
  <p>I've created a demo to address my issue. </p>
  
  <p><a href="https://codesandbox.io/s/kmqw47p8x7" rel="nofollow noreferrer">https://codesandbox.io/s/kmqw47p8x7</a></p>
  
  <pre><code>class App extends React.Component {
    constructor(props) {
      super(props);
    }
  
    save = () =&gt; {
      alert("how to get state of Form?");
      //fire api call
    };
    render() {
      return (
        &lt;div&gt;
          &lt;Form /&gt;
          &lt;button onClick={this.save}&gt;save&lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <ul>
  <li>One thing I don't want to do is sync the state for onChange event, because within Form there might be another Form.</li>
  </ul>