title: React context return undefined
body: <p>I am using React Context api to pass some states to different child components and it's returning <code>undefined</code>.</p>
  
  <p>Parent component:</p>
  
  <pre><code>export const UserContext = React.createContext();
  export class Provider extends Component {
    state = {
      editGroup: false,
    }
    render() {
      return (
        &lt;UserContext.Provider value={{
          state: this.state
        }}&gt;
          {this.props.children}
        &lt;/UserContext.Provider&gt;
      )
    }
  }
  </code></pre>
  
  <p>Child component:</p>
  
  <pre><code>import { UserContext } from './index';
  
  return (
    &lt;React.Fragment&gt;
      &lt;UserContext.Consumer&gt;
        {(context) =&gt; (
          &lt;p&gt;im inside the consumer {console.log(context)}&lt;/p&gt;
        )}
      &lt;/UserContext.Consumer&gt;
    &lt;/React.Fragment&gt;
  );
  </code></pre>
  
  <p>This last <code>console.log</code> is returning as <code>undefined</code>, what am I doing wrong here ?</p>