title: setState triggers constructor
body: <p>Since a couple of weeks or so I'm working on some tutorials to learn myself some React.</p>
  
  <p>Now I'm trying to get Auth working with a admin dashboard. 
  I have a sidebar in the dashboard and want it to toggle. This worked before I added Auth. 
  Now I have a HOC as such:</p>
  
  <pre><code>import React, {Component} from 'react';
  import {connect} from 'react-redux';
  import {Route, Redirect} from 'react-router-dom';
  
  export const PrivateRoute = ({component: ComposedComponent, ...rest}) =&gt; {
  
    class Authentication extends Component {
  
      // redirect if not authenticated; otherwise, return the component inputted into &lt;PrivateRoute /&gt;
      handleRender(props) {
        if (!this.props.authenticated) {
          return &lt;Redirect to={{
            pathname: '/login',
          }}/&gt;;
        } else {
          return &lt;ComposedComponent {...props}/&gt;;
        }
      }
  
      render() {
        return (
            &lt;Route {...rest} render={this.handleRender.bind(this)}/&gt;
        );
      }
    }
  
    function mapStateToProps(state) {
      return {authenticated: state.auth.authenticated};
    }
  
    const AuthenticationContainer = connect(mapStateToProps)(Authentication);
    return &lt;AuthenticationContainer/&gt;;
  };
  </code></pre>
  
  <p>And my TemplateComponent</p>
  
  <pre><code>import React, {Component} from 'react';
  import './Template.css';
  
  class Template extends Component {
  
    constructor(props) {
      super(props)
      this.state = {toggled: true}
    }
  
    toggleMenu = () =&gt; {
      this.setState({toggled: !this.state.toggled});
    };
  
    render() {
      const sidebar = `sidebar-toggle ${this.state.toggled ? 'active' : ''}`;
      return(
          &lt;nav className="navbar navbar-inverse" role="navigation"&gt;
            &lt;div className="container"&gt;
              &lt;div className="navbar-header"&gt;
                &lt;a id="menu-toggle" href="#" className="navbar-toggle" onClick={this.toggleMenu}&gt;
                  &lt;span className="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span className="icon-bar"/&gt;
                  &lt;span className="icon-bar"/&gt;
                  &lt;span className="icon-bar"/&gt;
                &lt;/a&gt;
                &lt;a className="navbar-brand" href="home.xhtml"&gt;
                  Araido
                &lt;/a&gt;
              &lt;/div&gt;
              &lt;div id="sidebar-wrapper" className={sidebar} &gt;
                &lt;ul className="sidebar-nav"&gt;
                  &lt;li&gt;
                    &lt;a href="#item1"&gt;Item 1&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;a href="#item2"&gt;Item 2&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;a href="#item3"&gt;Item 3&lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
      )
    }
  }
  
  export default Template;
  </code></pre>
  
  <p>What happens now is when my component uses setState() it will trigger the constructor again. which sets my sidebar state back to toggled. </p>
  
  <p>Thanks in advance</p>