title: React - how to pass state to another component
body: <p>I'm trying to figure out how to notify another component about a state change. Let's say I have 3 components - App.jsx,Header.jsx,and SidebarPush.jsx and all I'm simply trying to do is toggle a class with an onClick.</p>
  
  <p>So the Header.jsx file will have 2 buttons when clicked will toggle the states to true or false. The other 2 components App.jsx and Header.jsx will need to know about these state changes so they can toggle a class
  whenever those states change.</p>
  
  <h2>App.jsx</h2>
  
  <pre><code>import React from 'react';
  import Header from 'Header';
  import classNames from "classnames";
  import SidebarPush from 'SidebarPush';
  import PageWrapper from 'PageWrapper';
  
  var MainWrapper = React.createClass({
      render: function() {
          return (
              &lt;div className={classNames({ 'wrapper': false, 'SidebarPush-collapsed': !this.state.sidbarPushCollapsed })}&gt;
                  &lt;Header/&gt;
                  &lt;SidebarPush/&gt;
                  &lt;PageWrapper&gt;
                  {this.props.children}
                  &lt;/PageWrapper&gt;
              &lt;/div&gt;
          );
      }
  });
  
  module.exports = MainWrapper;
  </code></pre>
  
  <h2>Header.jsx</h2>
  
  <pre><code>import React from 'react';
  import ReactDom from 'react-dom';
  
  
  class Header extends React.Component {
      constructor() {
          super();
          this.state = {
              sidbarPushCollapsed: false,
              profileCollapsed: false
          };
          this.handleClick = this.handleClick.bind(this);
      }
      handleClick() {
          this.setState({
              sidbarPushCollapsed: !this.state.sidbarPushCollapsed,
              profileCollapsed: !this.state.profileCollapsed
  
          });
      }
      render() {
          return (
              &lt;header id="header"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;button type="button" id="sidbarPush" onClick={this.handleClick} profile={this.state.profileCollapsed}&gt;
                              &lt;i className="fa fa-bars"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;button type="button" id="profile" onClick={this.handleClick}&gt;
                              &lt;i className="icon-user"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;button id="sidbarOverlay" onClick={this.handleClick}&gt;
                              &lt;i className="fa fa-indent"&gt;&lt;/i&gt;
                          &lt;/button&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/header&gt;
          );
      }
  };
  
  module.exports = Header;
  </code></pre>
  
  <h2>SidebarPush.jsx</h2>
  
  <pre><code>import React from 'react';
  import ReactDom from 'react-dom';
  import classNames from "classnames";
  
  
  class SidebarPush extends React.Component {
      render() {
          return (
              &lt;aside className="sidebarPush"&gt;
                  &lt;div className={classNames({ 'sidebar-profile': true, 'hidden': !this.state.pagesCollapsed })}&gt;
                          ....
                  &lt;/div&gt;
  
                  &lt;nav className="sidebarNav"&gt;
                          ....
                  &lt;/nav&gt;
              &lt;/aside&gt;
          );
      }
  }
  
  
  export default SidebarPush;
  </code></pre>