javascript - ReactJs コンテキスト - 現在のコンポーネントの状態を渡された状態に置き換える方法

Question

私は ReactJs のコンテキストに頭を悩ませようとしていますが、最終的に状態名と countNumber を表示するためにある程度の進歩を遂げました。

ただし、 formatCount() 関数で使用されている現在の状態を置き換える方法を見つけるのにまだ苦労しています。

以下の例でこれを行う方法を誰か教えてもらえますか?

メソッド formatCount() で 5 など、コンテキストで数値を使用したいので、次のようになります。

    formatCount() {
        const currentCount = {c.state.currentCount};
        return currentCount === 0 ? "Zero" : currentCount;
    }

これが私のコンテキストです

import React, { Component } from "react";
export const CounterContext = React.createContext();

export default class CounterProvider extends Component {
    state = {
        state: { name: 'bob', currentCount: 5 },
    }
    render() {
        return (
            <CounterContext.Provider value={ this.state }>
                {this.props.children}
            </CounterContext.Provider>
        )
    }
}

これが私のカウンターコンポーネントです

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 <div className="m-2">
            <CounterContext.Consumer>
                {c =>
                    <div className="m-2">
                        <p>My name is {c.state.name} - {c.state.currentCount}</p>
                        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
                        <button className="btn btn btn-primary btn-sm m-2" onClick={() => { this.incrementCounter() }}>Increment</button>
                        <button className="btn btn-danger btn-sm m-2" onClick={() => { this.incrementCounter() }}>Delete</button>
                    </div>
                }
            </CounterContext.Consumer>
        </div>;
    }

    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
        });
    }
}