title: How to change style of a different component on button click in react?
body: <p>I would like to apply a width of 100% to my navbar on click of a button. Intially, it would be 0% (hidden). 
  To do this, I use a state to keep track of the navbar width, However, it seems that my state wouldn't change onclick.</p>
  
  <pre><code>class Navbar extends Component {
    constructor(){
      super();
      this.state = {
        sidenav: {
          width: '0%',
        }
      }
    }
  
    showNavBar = () =&gt; {
      this.setState({
        sidenav: {
          width: '100%',
        }
      })
    }
  
    render(){
      return(
        &lt;div&gt;
          &lt;div className ="sidenav" style ={{width : this.state.sidenav.width}}&gt;
            &lt;NavLink exact to="/"&gt;Home&lt;/NavLink&gt;
            &lt;NavLink exact to="/about"&gt;About&lt;/NavLink&gt;
            &lt;NavLink exact to="/portfolio"&gt;Portfolio&lt;/NavLink&gt;
            &lt;NavLink exact to="/contacts"&gt;Contacts&lt;/NavLink&gt;
            &lt;div className="content"&gt;
              &lt;Route exact path="/" component={Home} /&gt;
              &lt;Route exact path="/about" component={About} /&gt;
              &lt;Route exact path="/portfolio" component={Portfolio} /&gt;
              &lt;Route exact path="/contacts" component={Contacts} /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;NavbarButton onClick={this.showNavBar}/&gt;
        &lt;/div&gt;
      )
    }
  };
  </code></pre>
  
  <p>Can anyone point out where I went wrong?</p>
  
  <p><strong>EDIT:</strong> </p>
  
  <p>So I followed the examples you guys posted and got it working only when I explicitly give the  in the render function. </p>
  
  <p>So here is my code for the NavBarbutton, maybe someone can see why it's wrong?</p>
  
  <pre><code>const NavbarButton = (props) =&gt; {
    return (
      &lt;button style = {style} onClick = {props.showNavBar}&gt;☰&lt;/button&gt;
    )
  }
  </code></pre>