title: How to pass states between function components in React
body: <p>My Navbar component has 2 child components. Every components has his own state.
  States working ok within their components. How to update both states from false to true on same time when   both function onClick will be executed?</p>
  <p>Main component Navbar</p>
  <pre><code>import Hamburger from &quot;./Hamburger&quot;;
  import ListMenu from &quot;./ListMenu&quot;;
  
  const Navbar = () =&gt; {
    return (
      &lt;div className=&quot;navContainer&quot;&gt;
        &lt;nav className=&quot;navigation&quot;&gt;
          &lt;div className=&quot;logo&quot;&gt;LOGO&lt;/div&gt;
          &lt;ListMenu /&gt;
          &lt;Hamburger /&gt;
        &lt;/nav&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>ListMenu component</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  
  const ListMenu = () =&gt; {
    const [showMobileMenu, setShowMobileMenu] = useState(false);
  
    const menu = [&quot;HOME&quot;, &quot;PRODUCTS&quot;, &quot;ABOUT&quot;, &quot;CONTACT&quot;];
  
    const onClick = () =&gt; {
      if (window.innerWidth &lt; 757) {
        setShowMobileMenu(!showMobileMenu);
      }
    };
    return (
    &lt;ul className={`navList ${showMobileMenu ? &quot;open&quot; : &quot;&quot;}`}&gt;
       {menu.map((item) =&gt; (
         &lt;li key={item} className=&quot;listItem&quot; onClick={onClick}&gt;
           {item}
         &lt;/li&gt;
       ))}
     &lt;/ul&gt;
    );
  };
  
  export default ListMenu;
  </code></pre>
  <p>Hamburger component</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  
  const Hamburger = () =&gt; {
    const [navBarStatus, setNavBarStatus] = useState(false);
  
    const onClick = () =&gt; {
      if (window.innerWidth &lt; 757) {
        setNavBarStatus(!navBarStatus);
      }
    };
  
    return (
      &lt;div className=&quot;nav_bar&quot;&gt;
        &lt;div
          onClick={onClick}
          className={`hamburger ${navBarStatus ? &quot;is-active&quot; : &quot;&quot;}`}
        &gt;
          &lt;span className=&quot;line&quot;&gt;&lt;/span&gt;
          &lt;span className=&quot;line&quot;&gt;&lt;/span&gt;
          &lt;span className=&quot;line&quot;&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default Hamburger;
  </code></pre>