React parent access state from child
<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>