React - how to pass state to another component : <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>
