title: How to use React Context with useState hook to share state from different components?
body: <p>I am new to React and currently I'm working on a Gatsby site where I have a Layout.js(Parent) and Menu.js(Child), when the state changes on Menu, I'd like it passed to Layout.js. </p>
  
  <p>What I am trying to do is when the menu is active, the text in the layout will change.</p>
  
  <p><strong>Menu.js</strong></p>
  
  <pre><code>import React, {useState, createContext} from "react"
  const MenuContext = createContext(1)
  
  const Menu = (props) =&gt; {
    const [active, setActive] = useState(1)
    const clickHandler = () =&gt; {
      setActive(!active);
    }
    return(
      &lt;div className={(active ? `open` : `close`)} onClick={clickHandler}&gt;&lt;/div&gt;
    )
  }
  
  export { Menu, MenuContext }
  </code></pre>
  
  <p><strong>Layout.js</strong></p>
  
  <pre><code>import React, {useContext} from "react"
  import { Menu, MenuContext } from "../components/menu"
  
  const Layout = ({ children }) =&gt; {
  
    const menuActive = useContext(MenuContext)
  
    return (
      &lt;&gt;
        &lt;h1 style={{color:`#fff`}}&gt;{(menuActive) ? `Menu Opened` : `Menu Closed`}&lt;/h1&gt;
        &lt;main&gt;{children}&lt;/main&gt;
        &lt;Menu /&gt;
      &lt;/&gt;
    )
  }
  
  export default Layout
  </code></pre>
  
  <p>It seems like <code>menuActive</code> is always printing 1. I can make sure the state is working fine inside Menu.js, but I don't know how to pass the state to Layout.js. </p>
  
  <p>Any advices please, thank you!</p>