title: ReactJs context - how to replace the current component state with the state passed in
body: <p>I am trying to get my head around ReactJs context, and have finally made some progress to display the state name and countNumber.</p>
  
  <p>However I am still struggling to work out how to replace the current state, which is used in my formatCount() function.</p>
  
  <p>Can anyone let me know how you would do this in my example below? </p>
  
  <p>I would like to use the number in my context e.g. 5 in the method, formatCount(), so it would be something like </p>
  
  <pre><code>    formatCount() {
          const currentCount = {c.state.currentCount};
          return currentCount === 0 ? "Zero" : currentCount;
      }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/LAyrN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LAyrN.png" alt="enter image description here"></a></p>
  
  <p><strong>Here is my context</strong></p>
  
  <pre><code>import React, { Component } from "react";
  export const CounterContext = React.createContext();
  
  export default class CounterProvider extends Component {
      state = {
          state: { name: 'bob', currentCount: 5 },
      }
      render() {
          return (
              &lt;CounterContext.Provider value={ this.state }&gt;
                  {this.props.children}
              &lt;/CounterContext.Provider&gt;
          )
      }
  }
  </code></pre>
  
  <p><strong>Here is my counter component</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import { RouteComponentProps } from "react-router";
  import { CounterContext } from "../contexts/context.js";
  
  export class Counter extends Component {
      state = { currentCount: 7 }
  
      render() {
          return &lt;div className="m-2"&gt;
              &lt;CounterContext.Consumer&gt;
                  {c =&gt;
                      &lt;div className="m-2"&gt;
                          &lt;p&gt;My name is {c.state.name} - {c.state.currentCount}&lt;/p&gt;
                          &lt;span className={this.getBadgeClasses()}&gt;{this.formatCount()}&lt;/span&gt;
                          &lt;button className="btn btn btn-primary btn-sm m-2" onClick={() =&gt; { this.incrementCounter() }}&gt;Increment&lt;/button&gt;
                          &lt;button className="btn btn-danger btn-sm m-2" onClick={() =&gt; { this.incrementCounter() }}&gt;Delete&lt;/button&gt;
                      &lt;/div&gt;
                  }
              &lt;/CounterContext.Consumer&gt;
          &lt;/div&gt;;
      }
  
      formatCount() {
          const currentCount = this.state.currentCount;
          return currentCount === 0 ? "Zero" : currentCount;
      }
  
      getBadgeClasses() {
          let classes = "badge m-2 badge-";
          classes += this.state.currentCount === 0 ? "warning" : "primary";
          return classes;
      }
  
      incrementCounter() {
          this.setState({
              currentCount: this.state.currentCount + 1
          });
      }
  }
  </code></pre>