title: Pass context between siblings using context in React
body: <p>I have the following code where I am trying to get a value from one component to its sibling using the <code>context</code> api. </p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  
  function App() {
    return (
      &lt;div&gt;
        &lt;TheButton /&gt;
        &lt;Display /&gt;
      &lt;/div&gt;
    );
  }
  
  export const NumberContext = React.createContext();
  
  function TheButton() {
    return (
      &lt;NumberContext.Provider value={"test"}&gt;
        &lt;button&gt;Click me&lt;/button&gt;
      &lt;/NumberContext.Provider&gt;
    );
  }
  
  function Display() {
    const context = React.useContext(NumberContext);
    return &lt;div&gt;The answer {context}.&lt;/div&gt;;
  }
  
  ReactDOM.render(&lt;App /&gt;, document.querySelector("#root"));
  </code></pre>
  
  <p>As you can see I am passing the 'test' value in the provider, but when the page renders all I see is "The answer ." </p>
  
  <p>Here is a a codesandbox for the issue <a href="https://codesandbox.io/s/pedantic-forest-zjlc2" rel="nofollow noreferrer">https://codesandbox.io/s/pedantic-forest-zjlc2</a></p>