title: Child Component is not able to trigger state change
body: <p>Simple React State Example. The parent component is App which starts out just showing a button, when the button is clicked it should render <code>AllRecipes</code> (this works and I am able to manage state of AllRecipes). Inside <code>AllRecipes</code> is a button which needs to trigger a state change to then further render <code>ingredients</code> (this button does nothing when clicked, it needs to toggle the state of ingredients). I think this is a really good small example of how to manage state but I am missing something..</p>
  
  <pre><code>var App = React.createClass({
  
      getInitialState: function(){
          return {showIngredients: false, showRecipes: false};
      },
  
      toggleRecipes: function(){
          this.setState({showRecipes: !this.state.showRecipes})
      },
  
      toggleIngredients: function(){
          this.setState({showRecipes: !this.state.showRecipes})
      },
  
    render: function() {
          var recipes = this.state.showRecipes ? &lt;Recipes/&gt; : null;
          return (
                  &lt;div&gt;
                      &lt;h1&gt; Recipe App &lt;/h1&gt;
                          &lt;button onClick={this.toggleRecipes}&gt; Show Recipes &lt;/button&gt;
  
                          {recipes}
                  &lt;/div&gt;
              );
      }
  });
  
  var Recipes = React.createClass({
      render: function() {
          var ingredients = this.props.showIngredients ? &lt;Ingredients/&gt; : null;
          return (
                  &lt;div&gt;
                      &lt;h1&gt; list of recipes &lt;/h1&gt;
                          &lt;ul&gt;
                              &lt;li&gt; Chicken Soup &lt;/li&gt;
                              &lt;li&gt; Chicken Wings &lt;/li&gt;
                              &lt;button onClick={this.props.toggleIngredients}&gt; Show Recipes &lt;/button&gt;
                              {ingredients}
                          &lt;/ul&gt;
                  &lt;/div&gt;
  
              );
      }
  });
  
  var Ingredients = React.createClass({
      render: function() {
          return (
                  &lt;div&gt;
                      &lt;h1&gt; List of Ingredients &lt;/h1&gt;
                          &lt;ul&gt;
                              &lt;li&gt; Salt &lt;/li&gt;
                              &lt;li&gt; Pepper &lt;/li&gt;
                          &lt;/ul&gt;
                  &lt;/div&gt;
              );
      }
  });
  
  React.render(&lt;App/&gt;, document.body);
  </code></pre>