title: Why is the onClick button telling me dispatch is not a function
body: <p>I have an <code>onDeleteClick</code> function which is giving me an error when I try to click it and response is dispatched is not a function and the error is indicated to be coming from this code </p>
  
  <p>I changed the single quote to back-ticks and still got the same result</p>
  
  <pre><code>class Contact extends Component {
    state = {
      showContactInfo: false
    };
  
    onDeleteClick = (id, dispatch) =&gt; {
      dispatch({ type: "DELETE_CONTACT", payload: id });
    };
  
    render() {
      const { name, id, email, phone } = this.props.contact;
      const { showContactInfo } = this.state;
  
      return (
        &lt;Consumer&gt;
          {value =&gt; {
            const { dispatch } = value;
            return (
              &lt;div className="card card-body mb-3"&gt;
                &lt;h4&gt;
                  {name}
                  &lt;i
                    onClick={() =&gt;
                      this.setState({
                        showContactInfo: !this.state.showContactInfo
                      })
                    }
                    className="fas fa-sort-down"
                    style={{ cursor: "pointer", color: "indigo" }}
                  /&gt;
                  &lt;i
                    className="fas fa-times"
                    style={{ cursor: "pointer", float: "right", color: "blue" }}
                    onClick={this.onDeleteClick.bind(this, id, dispatch)}
                  /&gt;
                &lt;/h4&gt;
                {showContactInfo ? (
                  &lt;ul className="list-group"&gt;
                    &lt;li className="list-group-item"&gt;Email: {email}&lt;/li&gt;
                    &lt;li className="list-group-item"&gt;Phone: {phone}&lt;/li&gt;
                  &lt;/ul&gt;
                ) : null}
              &lt;/div&gt;
            );
          }}
        &lt;/Consumer&gt;
      );
    }
  }
  
  Contact.propTypes = {
    contact: PropTypes.object.isRequired
  };
  
  export default Contact;
  </code></pre>
  
  <p>I want the <code>onDelete</code> function to be able to delete from the list.</p>