title: How to fix: Context Provider not passing new context values down to children
body: <p>i'm new to using React Hooks and React Context and I was wondering why my Context Provider doesn't seem to pass down the new values to a child component. I have it set up where the initial value "ColorContext" is 'red' but I want the value of "ColorContext" in the button to be 'green'. However, when I try to do so, the "ColorContext" value does not change and stays 'red.'</p>
  
  <p>Here is the link to my code: 
  <a href="https://stackblitz.com/edit/react-8mhqwu" rel="nofollow noreferrer">https://stackblitz.com/edit/react-8mhqwu</a></p>
  
  <pre><code>import React, { Component, useState, useContext, createContext } from 'react';
  import { render } from 'react-dom';
  
  const ColorContext = createContext('red')
  
  
  const App = (props) =&gt; {
  
    return (
      &lt;div className="app"&gt;
        &lt;ColorContext.Provider value= {'green'}&gt;
          &lt;button
          style = {{backgroundColor: useContext(ColorContext)}}
          &gt;
            Click here
          &lt;/button&gt;
        &lt;/ColorContext.Provider&gt;
      &lt;/div&gt;
    )
  }
  
  render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>