title: React Context - setState with onClick inside Consumer
body: <p>I have implemented React Context API and I am trying to update the state defined inside the Provider via an onClick function inside a child component.</p>
  
  <p>This is what I have done so far, in the <strong>App.js</strong> I have:</p>
  
  <pre><code>import { createContext } from 'react';
  const MyContext = React.createContext();
  export class MyProvider extends Component {
      state = {
          currPrj: ''
      }
  
      handleBtnClick = prjCode =&gt; {
  
          this.setState({
              currPrj: prjCode
          })
  
      }
  
      render() {
          return(
              &lt;MyContext.Provider value={{
                  state: this.state
              }}&gt;
                  {this.props.children}
              &lt;/MyContext.Provider&gt;
          )
      }
  }
  
  export const MyComsumer = MyContext.Consumer;
  </code></pre>
  
  <p>Inside my <strong>child component</strong> I have:</p>
  
  <pre><code>import React, { Component } from "react";
  import { BrowserRouter as Router, Route, Link } from "react-router-dom";
  import { MyComsumer } from "../../index";
  
  export class ProjectCard extends Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        // currPrj: ''
      };
    }
  
    render() {
      return (
        &lt;MyComsumer&gt;
          {(context) =&gt; (
            &lt;div className="card card-project"&gt;
            &lt;p&gt;{context.state.currPrj}&lt;/p&gt;
              &lt;div className="content"&gt;
                &lt;div className="author"&gt;
                  &lt;Link to={ `projects/${this.props.code}/detail/info` } onClick={() =&gt; handleBtnClick(this.props.code) }&gt;
                    &lt;h4 className="title"&gt;
                      {this.props.title}
                    &lt;/h4&gt;
                  &lt;/Link&gt;
                &lt;/div&gt;
            &lt;/div&gt;
          )}
        &lt;/MyComsumer&gt;
      );
    }
  }
  
  export default ProjectCard;
  </code></pre>
  
  <p>This way I get the following error</p>
  
  <pre><code>Failed to compile
  ./src/components/ProjectCard/ProjectCard.jsx
    Line 32:  'handleBtnClick' is not defined  no-undef
  
  Search for the keywords to learn more about each error.
  </code></pre>
  
  <p>I don't get it why, because:</p>
  
  <pre><code>&lt;p&gt;{context.state.currPrj}&lt;/p&gt;
  </code></pre>
  
  <p>throws no error...</p>
  
  <p>Plus, is <em>this.props.code</em> passed correctly to the function?</p>
  
  <p>Many thanks.</p>