Estoy aprendiendo los contextos de React y traté de crear un contador simple usando contextos para visualizar el concepto. Desafortunadamente, no funciona perfectamente. El contexto funciona bien, pero no funciona con aritmética simple. Lo que quiero decir con que no funciona es que el valor no aparece después del incremento.

Estoy tratando de llegar a la solución sin usar componentes funcionales.

El código completo se adjunta aquí y es simple.

CounterContext.js

 import React, {Component, createContext} from "react" export const CounterContext = createContext() class CounterContextProvider extends Component { state = { ourNumber: 0 } addOne = ()=> { console.log("addOne is reached") this.state.ourNumber = this.state.ourNumber + 1 } render() { return ( <CounterContext.Provider value={{...this.state, addOne: this.addOne}}> {this.props.children} </CounterContext.Provider> ) } } export default CounterContextProvider;

Aplicación.js

 import React, {Component} from 'react'; import CounterContextProvider from "./CounterContext"; import CounterPage from "./CounterPage"; class App extends Component { render() { return ( <CounterContextProvider> <CounterPage/> </CounterContextProvider> ); } } export default App;

CounterPage.js

 import React, {Component} from 'react'; import {CounterContext} from "./CounterContext"; class CounterPage extends Component { render() { return ( <CounterContext.Consumer> {counterContext=>{ const {ourNumber, addOne} =counterContext return( <> <h1> { ourNumber } </h1> <p> { ourNumber } </p> <button onClick={()=>{addOne()}}>+1</button> </> ) }} </CounterContext.Consumer> ); } } export default CounterPage;