title: How to make clicking a menu button toggle show/hide of a menu sidebar component
body: <p>I have this three component app.js, header.js and menu.js. I'm trying to code when you click on menu button which is in header component it toggles (show/hide) menu component (menu-sidebar). Is it possible to make such communication in react with two components without jQuery? I tried with this tutorial but didn't succeed <a href="https://www.codementor.io/chrisharrington/how-to-build-a-sliding-menu-using-react-js-and-less-css-du107mpij" rel="noreferrer">https://www.codementor.io/chrisharrington/how-to-build-a-sliding-menu-using-react-js-and-less-css-du107mpij</a></p>
  
  <p><strong>app.js</strong>:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  // components
  import Header from './components/header';
  import Menu from './components/menu';
  
  class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Header /&gt;
          &lt;Menu /&gt;  
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>header.js</strong>:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Header extends Component {
      render() {
          return (
              &lt;header id="header"&gt;
                  &lt;h1&gt;&lt;a href="/"&gt;Lorem&lt;/a&gt;&lt;/h1&gt;
                  &lt;nav className="links"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href="/"&gt;Lorem&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/"&gt;Ipsum&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/"&gt;Feugiat&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/"&gt;Tempus&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="/"&gt;Adipiscing&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
                  &lt;nav className="main"&gt;
                      &lt;ul&gt;
                          &lt;li className="search"&gt;
                              search
                          &lt;/li&gt;
                          &lt;li className="menu"&gt;
                              &lt;a className="fa-bars" href="#menu"&gt;Menu&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/header&gt;
          );
      }
  }
  
  export default Header;
  </code></pre>
  
  <p><strong>menu.js</strong>:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  class Menu extends Component {
      render() {
          return (
  
      &lt;section id="menu"&gt;
          &lt;section&gt;
              &lt;form className="search" method="get" action="#"&gt;
                  &lt;input type="text" name="query" placeholder="Search" /&gt;
              &lt;/form&gt;
          &lt;/section&gt;
          {/* Links */}
          &lt;section&gt;
              &lt;ul className="links"&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;
                          &lt;h3&gt;Lorem ipsum&lt;/h3&gt;
                          &lt;p&gt;Feugiat tempus veroeros dolor&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;
                          &lt;h3&gt;Dolor sit amet&lt;/h3&gt;
                          &lt;p&gt;Sed vitae justo condimentum&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;
                          &lt;h3&gt;Feugiat veroeros&lt;/h3&gt;
                          &lt;p&gt;Phasellus sed ultricies mi congue&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="/"&gt;
                          &lt;h3&gt;Etiam sed consequat&lt;/h3&gt;
                          &lt;p&gt;Porta lectus amet ultricies&lt;/p&gt;
                      &lt;/a&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/section&gt;
      &lt;/section&gt;
          );
      }
  }
  
  export default Menu;
  </code></pre>