useReducer2.js

import React, { createContext, useContext } from "react";
import ReactDOM from "react-dom";

const CounterContext = createContext({
  counter: 0
});

const Display = () => {
  const context = useContext(CounterContext);
  return <h1>Valor del contador: {context.counter}</h1>;
};

const Increment = ({ addToCounter }) => (
  <button onClick={() => addToCounter(1)}>Sumar 1</button>
);
const Decrement = ({ addToCounter }) => (
  <button onClick={() => addToCounter(-1)}>Restar 1</button>
);

const App = () => {
  const addToCounter = () => false;
  const init = { counter: 0 };
  return (
    <CounterContext.Provider value={init}>
      <Display />
      <Increment addToCounter={addToCounter} />
      <Decrement addToCounter={addToCounter} />
    </CounterContext.Provider>
  );
};
ReactDOM.render(<App />, document.getElementById("root"));