title: How to access provider value when using useContext hook
body: <pre><code>import React, { useContext } from 'react'
  import { MyContext, MyProvider } from './Context'
  
  const MasterContainer  = () =&gt;{
      const ctx = useContext(MyContext)
  
      return (
          &lt;MyProvider&gt;
              {ctx}
              &lt;MyContext.Consumer&gt;
                  {context=&gt;&lt;div&gt;{context.age}&lt;/div&gt;}
              &lt;/MyContext.Consumer&gt;  
          &lt;/MyProvider&gt;
      )
  }
  
  export default MasterContainer
  </code></pre>
  
  <p>ctx right now is returning undefined when i actually want to pull ctx.age </p>
  
  <pre><code>import React from 'react'
  
  
  export const MyContext = React.createContext("dude")
  
  export class MyProvider extends React.Component{
      state = {
          name: 'Hello',
          age: 12
      }
      render(){
          return (
              &lt;MyContext.Provider value={this.state}&gt;
                  {this.props.children}
              &lt;/MyContext.Provider&gt;
          )
      }
  }
  </code></pre>
  
  <p>Basically i want to access the values of my state in my provider using hooks, how do i go about this?</p>