title: How to save user in context after login
body: <p>I'm trying to use function from context provider file in order to save current user info in context and pass it between components</p>
  
  <p>this is my provider code :</p>
  
  <pre><code>class UIContext extends Component {
  
     state = {
         userId: "",
         userName: ""
     }
  
     saveUser = (id, name) =&gt; {
         this.setState({
             userId: id,
             userName: name
         })
  }
  
     render(){
         return(
             &lt;UserContext.Provider value={{
                 state: this.state,
                 saveUser: this.saveUser
             }}&gt;
                 {this.props.children}
             &lt;/UserContext.Provider&gt;
         )
     }
  }
  </code></pre>
  
  <p>this is my login page render function code :</p>
  
  <pre><code> render() {
          return (
              &lt;UserContext.Consumer&gt;
              {({context}) =&gt; (
                  &lt;&gt;
  
         &lt;input className="main_input" onChange={this.onChangeHandlerTz} id="tz" placeholder='ID'/&gt;
                      &lt;input className="main_input" type="password" onChange={this.onChangeHandlerPass} id="pass" placeholder='Password'/&gt;
  
                      &lt;button className="main_btn" id="save" onClick={this.onClickLogin}&gt;login&lt;/button&gt;
                      &lt;button className="main_btn" id="save" onClick={this.onClickRegister}&gt;register&lt;/button&gt;
  
              &lt;/&gt;)}
              &lt;/UserContext.Consumer&gt;
  )}
  </code></pre>
  
  <p>I want to use this.context.saveUser here: </p>
  
  <pre><code>onClickLogin = (e) =&gt; {
          e.preventDefault();
          if (this.validate(this.state.id)) {
              fetch('/api/v1/login',
                  {
                      method: 'POST',
                      body: JSON.stringify({
                          id: this.state.id,
                          password: this.state.pass
                      }),
                      headers: {
                          "Content-type": "application/json; charset=UTF-8"
                      }
                  }).then(res =&gt; res.json())
                  .then(data =&gt; {
                      if (data.status === 0) {
                    this.context.saveUser(this.state.id, this.state.fullName)
                      } else {
                          this.setState({loginError: true})
                      }
                  }).catch(error =&gt; {
                  // this.setState({loading: false})
                  this.setState({error: error})
                  console.log(error)
              })
          } else {
              this.setState({idError:true})
          }
      };
  </code></pre>
  
  <p>this is the error I get :</p>
  
  <pre><code>TypeError: _this.context.saveUser is not a function
  </code></pre>
  
  <p>how can I use the context outside the render function ?</p>