title: Why can't I access the context's methods or properties
body: <p>I am trying to use React's context api to manage a global state.  When I try to invoke contextual methods or access contextual proprties, I get errors saying "this.context.setUser function does not exist" or "undefined".</p>
  
  <p>I have however been able to hard code values into the state of the context and retreive the hardcoded value. </p>
  
  <p>Feed Context</p>
  
  <pre><code>    import React, { Component } from 'react'
  
      const FeedContext = React.createContext({
        Feed: [],
        user: '',
        error: null,
        setError: () =&gt; {},
        clearError: () =&gt; {},
        setFeed: () =&gt; {},
        setUser: () =&gt; {}
      })
  
       export default FeedContext
  
      export class FeedProvider extends Component {
        state = {
          feed: [],
          error: null,
          user: ''
        };
  
        setUser = user =&gt; {
          this.setState({ user })
        }
  
        setFeed = Feed =&gt; {
          this.setState({ Feed })
        }
  
        setError = error =&gt; {
  
          console.error()
          this.setState({ error })
        }
  
        clearError = () =&gt; {
          console.log('context is accessed')
          this.setState({ error: null })
        }
  
        render() {
          const value = {
            feed: this.state.feed,
            error: this.state.error,
            setError: this.setError,
            clearError: this.clearError,
            setFeed: this.setFeed,
            setUser: this.setUser
          }
  
          return (
            &lt;FeedContext.Provider value={value}&gt;
              {this.props.children}
            &lt;/FeedContext.Provider&gt;
          )
        }
      }
  
  </code></pre>
  
  <p>AccountPanel.js</p>
  
  <pre><code>    import React from 'react';
      import FeedContext from "../../contexts/FeedContext";
  
      // functional component
      class AccountPanel extends React.Component {
  
  
      static contextType = FeedContext
  
  
      renderUserInfo(){
          const { user = [] } = this.context;
  
          //this returns "undefined"
          console.log(user.user)
  
          //this returns "user.setUser() is not a function"
          user.setUser('newUser')
  
          //this returns ' '
          this.context.setUser('y')
          console.log(user)
      }
  
      render(){
          return (
              &lt;section&gt;
                  { this.renderUserInfo() }
                 AccountPanel
              &lt;/section&gt;
          )
         }
  
      }
  
      export default AccountPanel;
  </code></pre>
  
  <p>I would like to be able to update the contextual state/user via this.context.setUser('newUser), then consume that value in my navbar component</p>