title: react-native: How can I update state in context api?
body: <p>When I update the state in another component, I can't  re-render of the Provider in <code>ContextProvider.js</code> and hence the consumer data doesn't change. </p>
  
  <p>ContextProvider.js</p>
  
  <pre><code>export const AppContext = React.createContext({basketNumber:0});
  export class ContextProvider extends React.PureComponent {
    state = {
        basketNumber:0,
    };
  
    render() {
      return (
        &lt;AppContext.Provider value={this.state}&gt;
          {this.props.children}
        &lt;/AppContext.Provider&gt;
      );
    }
  }
  </code></pre>
  
  <p>in another componet I call it:</p>
  
  <pre><code>import { AppContext } from './../../../components/ContextProvider';
  
  export default class Example extends React.PureComponent  {
     static contextType = AppContext;
  }
  </code></pre>
  
  <p>in <code>example</code> class, I can call <code>basketNumber</code></p>
  
  <pre><code>this.context.basketNumber
  </code></pre>
  
  <p>But how can I update it?</p>
  
  <p>I tried this:</p>
  
  <pre><code>this.context.basketNumber = 10;
  </code></pre>
  
  <p><strong>//EDIT</strong></p>
  
  <p>I add this code to Context provider:</p>
  
  <pre><code>addNumber(number) {
      this.setState({basketNumber:id});
  };
  </code></pre>
  
  <p>and try call it in <code>example</code> class:</p>
  
  <pre><code>this.context.addNumber(10);
  </code></pre>
  
  <p>But I get this error:</p>
  
  <blockquote>
    <p>_this.context.addNumber is nut a function</p>
  </blockquote>