React - Passing State between siblings?
<p>Basically new to React, I'm a bit confused on how to properly pass states between components. I found a similar question already <a href="https://stackoverflow.com/questions/24147331/react-the-right-way-to-pass-form-element-state-to-sibling-parent-elements">React – the right way to pass form element state to sibling/parent elements?</a>
but I wonder if you can give me a specific answer for the code below.</p>

<p>Currently the structure of the app includes:</p>

<ul>
<li>parent component - <code>App</code></li>
<li>2 childs: <code>SearchBar</code> and <code>RecipesList</code></li>
</ul>

<p>The goal is to make an async search on my Meteor collection and display only the <code>recipes</code> that match the search term.</p>

<p>Right now, I'm just showing all the recipes in my Meteor collection.
I've created a stateful component named <code>SearchBar</code> which holds the input value as <code>this.state.term</code>. The idea is to pass the state to <code>RecipesList</code> but I'm not sure if it's the right thing to do. Alternatively I'd let <code>App</code> deal with the state and passing it to the childs. I believe this is a very common scenario, how do you do it?</p>

<p><code>App</code></p>

<pre><code>class App extends Component {

render( ) {
    return (
        &lt;div&gt;
            &lt;Navbar/&gt;
            &lt;SearchBar/&gt;
            &lt;RecipesList/&gt;
        &lt;/div&gt;
    );
}
}
</code></pre>

<p><code>SearchBar</code></p>

<pre><code>export default class SearchBar extends Component {

constructor( props ) {
    super( props );

    this.state = {
        term: ''
    };
}

onInputChange( term ) {
    this.setState({ term });
}

render( ) {
    return (
        &lt;div className=" container-fluid search-bar"&gt;
            &lt;input value={this.state.term} onChange={event =&gt; this.onInputChange(event.target.value.substr( 0, 50 ))}/&gt;
            Value: {this.state.term}
        &lt;/div&gt;
    );
}

}
</code></pre>

<p><code>RecipesList</code></p>

<pre><code>const PER_CLICK = 5;

class RecipesList extends Component {

componentWillMount( ) {
    this.click = 1;
}

handleButtonClick( ) {
    Meteor.subscribe('recipes', PER_CLICK * ( this.click + 1 ));
    this.click++;
}

renderList( ) {
    return this.props.recipes.map(recipe =&gt; {
        return (
            &lt;div key={recipe._id} className="thumbnail"&gt;
                &lt;img src={recipe.image} alt="recipes snapshot"/&gt;
                &lt;div className="caption"&gt;
                    &lt;h2 className="text-center"&gt;{recipe.recipeName}&lt;/h2&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        );
    });
}

render( ) {
    return (
        &lt;ul className="list-group"&gt;
            {this.renderList( )}
            &lt;div className="container-fluid"&gt;
                &lt;button onClick={this.handleButtonClick.bind( this )} className="btn btn-default"&gt;More&lt;/button&gt;
            &lt;/div&gt;
        &lt;/ul&gt;
    );
}
}

// Create Container and subscribe to `recipes` collection
export default createContainer( ( ) =&gt; {
Meteor.subscribe( 'recipes', PER_CLICK );
return {recipes: Recipes.find({ }).fetch( )};
}, RecipesList );
</code></pre>