title: React parent access state from child
body: <p>How can I display state from child inside parent in React?</p>
  
  <pre><code>var Form = React.createClass({
      render: function() {
          return (
          &lt;form&gt;
              &lt;h1&gt;***CHILD STATE CHECKED***&lt;/h1&gt;
              {this.props.children}
          &lt;/form&gt;
          )
      }
  })
  
  var Checkbox = React.createClass({
      getInitialState: function() {
          return {
              checked: true
          }   
      },
  
      toggle: function() {
          this.setState({
              checked: !this.state.checked
          });
      },
  
      render: function() {
          return (
              &lt;div onClick={this.toggle} aria-checked={this.state.checked} role="checkbox"&gt;&lt;/div&gt;
          );
      }
  })
  
  ReactDOM.render(
      &lt;Form&gt;
          &lt;Checkbox /&gt;
      &lt;/Form&gt;,
      document.querySelector('#app')
  );
  </code></pre>
  
  <p>What is the best way to display the state of the child inside its parent (especially inside this  tag in parent component)?
  Is this possible without "ugly tricks"?<br>
  I want add some nodes or other components to the form when checkbox is checked.</p>