title: React: Children onclick to change parent's state for re-rendering
body: <p>I'm really new with react. I'm trying to get the parent to change page displayed depending on the states. I have a button in my sub-component that should send "true" or "false" to the parent component so it knows if to render it or not. I think it should be done with props like this:</p>
  
  <pre><code>this.state = {
     btnNewScreen: this.props.btnNewScreen //true or false
  };
  </code></pre>
  
  <p>But im not getting it to work. Could you give any tips? Here is the full parent - child</p>
  
  <p>parent - maindisplay.js</p>
  
  <pre><code>import React from 'react';
  import Mainpage_Addscreen from '../components/subcomponents/mainpage-addscreen';
  import Mainpage_Showscreens from '../components/subcomponents/mainpage-showscreens';
  //
  class MainDisplay extends React.Component {
      constructor() {
          super();
          this.state = {
              btnNewScreen: false //should be this.props.btnNewScreen?
          };
      }
  
      render() {
          var renderThis;
          if (!this.state.btnNewScreen) {
              renderThis =
                  &lt;div&gt;
                      &lt;Mainpage_Addscreen /&gt;
                      &lt;Mainpage_Showscreens /&gt;
                  &lt;/div&gt;
          }
          else {
              //renderThis = &lt;AddScreen /&gt;
              renderThis =
                  &lt;div&gt;
                      &lt;Mainpage_Addscreen /&gt;
                      &lt;h3&gt;Change to this when true (button click)&lt;/h3&gt;
                  &lt;/div&gt;
          }
          return (
              &lt;div&gt;
                  {renderThis}
              &lt;/div&gt;
          );
        }
      }
  
  
      export default MainDisplay;
  </code></pre>
  
  <p>child - mainpage-addscreen.js</p>
  
  <pre><code>import React from 'react';
  
  import Glyphicon from 'react-bootstrap/lib/Glyphicon';
  import Button from 'react-bootstrap/lib/Button';
  
  class Mainpage_Addscreen extends React.Component {
      constructor() {
          super();
          this.state = {
              btnNewScreen: true
          };
          this.newScreen = this.newScreen.bind(this);
      }
  
      newScreen(e) {
          this.setState({ btnNewScreen: !this.state.btnNewScreen });
          console.log(this.state.btnNewScreen);
      }
      render() {
          var text = this.state.btnNewScreen ? 'Add new' : 'Screens';
          return (
              &lt;div className="main_window col-sm-offset-1 col-sm-10"&gt;
                  &lt;h3 id="addscreens"&gt;Screens: &lt;/h3&gt;
                  &lt;Button id="addScreen" className="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" onClick={this.newScreen}&gt;&lt;Glyphicon id="refresh_screens" glyph="plus" /&gt;&amp;nbsp; {text}&lt;/Button&gt;
              &lt;/div&gt;
          );
      }
  }
  
  
  export default Mainpage_Addscreen;
  </code></pre>