title: × Unhandled Rejection (TypeError): this.handleUpdate is not a function
body: <p>I'm a new in React! I'm making e-commerce store for project. It is first time to write async and await. through fetch, I should receive backpack data! but I can't pass the data in context.js to backpackList.js because of this error!
  Unhandled Rejection (TypeError): this.handleUpdate is not a function &lt;
  const data = await getResponse.json(); but when i display console. this data can be seen in console.
  this.handleUpdate(data); but this function do not work. how can i fix this problem.
  Thank you so much!!</p>
  <pre><code>context.js
  import React, { Component } from 'react';
  
  const ProductContext = React.createContext();
  const ProductConsumer = ProductContext.Consumer;
  
  class ProductProvider extends Component {
    constructor() {
      super();
      this.state = {
        totalProducts: 0, 
        isLogin: false,
        bagInfoForNoneUser: [],
      };
    }
  
    componentDidMount() {
      fetch('/data/totalProducts.json', {
        method: 'GET',
      })
        .then(res =&gt; res.json())
        .then(data =&gt; {
          this.setState({
            totalProducts: data[0].totalProducts,
          });
        });
    }    
    handleUpdate = data =&gt; {
      this.setState({
        bagInfoForNoneUser: [this.state.bagInfoForNoneUser, data],
      });
    };
  
    async noneUserCart() {
      const url = '/data/getdata.json';
      const getResponse = await fetch(url);
      const data = await getResponse.json();
      this.handleUpdate(data); //this part error, 
    }
    
    handleTotalProduct = total =&gt; {
      this.setState({ totalProducts: total });
    };
  
    getToken = () =&gt; {
      const token = localStorage.getItem('token');
      return token;
    };
    render() {
      return (
        &lt;ProductContext.Provider
          value={{
            ...this.state,
            handleCart: this.handleCart,
            getToken: this.getToken,
            noneUserCart: this.noneUserCart,
          }}
        &gt;
          {this.props.children}
        &lt;/ProductContext.Provider&gt;
      );
    }
  }
  
  export { ProductProvider, ProductConsumer };
  </code></pre>
  <pre><code>BackPackList.js
  import React, { Component } from 'react';
  import { ProductConsumer } from '../../context';
  
  export default class BackpackList extends Component {
    render() {
      const {
        backpackdata,
        backdescdata,
        isdescOpen,
        showDesc,
        descClose,
        rangenumone,
        rangenumtwo,
      } = this.props;
  
      return (
        &lt;div&gt; 
          {backdescdata.map((bag, inx) =&gt; {
            return (
              &lt;&gt;
                {isdescOpen &amp;&amp; bag.id &gt; rangenumone &amp;&amp; bag.id &lt; rangenumtwo &amp;&amp; (
                  &lt;div className=&quot;listDescContainer&quot; key={inx}&gt;
                    &lt;div className=&quot;listDescBox&quot;&gt;
                      &lt;img
                        alt=&quot;bag&quot;
                        className=&quot;descImg&quot;
                        src={bag.image_url}
                      &gt;&lt;/img&gt;
                      &lt;div className=&quot;descText&quot;&gt;
                        &lt;div className=&quot;descName&quot;&gt;{bag.model_number}&lt;/div&gt;
                        &lt;div className=&quot;descPrice&quot;&gt;
                          A Blast from the Past, {bag.price}
                        &lt;/div&gt;
                        &lt;ProductConsumer&gt; // !!!this part! when i onclick, go to the context.js !
                          {value =&gt; (
                            &lt;div
                              className=&quot;cartBtn&quot;
                              onClick={() =&gt; {
                                  const result = value.noneUserCart(bag.id);
                                  console.log(result);
                              }}
                            &gt;
                             add to cart
                            &lt;/div&gt;
                          )}
                        &lt;/ProductConsumer&gt;
  
                        &lt;span className=&quot;descClosebtn&quot; onClick={descClose}&gt;
                          X
                        &lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                )}
              &lt;/&gt;
            );
          })}
        &lt;/div&gt;
      );
    }
  }
  
  
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/KavNT.png" rel="nofollow noreferrer">enter image description here</a></p>