How to reset React component to start from initial state from inside the parent component
<pre><code>var A = React.createClass({
onTabChange:function(e, id){
    this.setState( {tabIndex:id} );
    //Inside this function I would like to get the state of B component 
    //to start from initial state, (i.e. call initialState() function)
},

render:function(){
    return &lt;div&gt;
        &lt;FormTabs options={['A', 'B', 'C']} onChange={this.onTabChange} value={this.state.tabIndex} /&gt; // This creates 3 simple tabs 
        &lt;B x={5} y={8} z={10} /&gt;
    &lt;/div&gt;;
}
</code></pre>

<p>});</p>

<pre><code>var B = React.createClass({
getInitialState:function(){
    return {
        x: a,
        y: b,
        z: c
    }
},

render:function(){
    this.state.x = this.props.x;
    this.state.y = this.props.y;
    this.state.z = this.props.z;

    return &lt;div&gt;
            //...
        &lt;/div&gt;
}
</code></pre>

<p>});</p>

<p>So, what I exactly want is to delete the instance of B component inside the onTabChange function. Any helps about how I can delete the instance of it so that when I call , it gets into B.initialState() function.</p>