<div id="root"></div>

body {
  padding: 5px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
button {
  border-radius: 4px;
	height: 40px;
	color: #fff;
	background: #c4c4c4;
	border: 1px solid inherit;
}
button:hover {
  color: #fff;
  background: #DD4B39;
}
.count {
  padding: 5px;
  margin: 5px;
  font-size: 2em
}

const { useState, useContext } = React

const CountContext = React.createContext();

const Counter = () => {
  const { count, increase, decrease } = useContext(CountContext);
  return (
    <div className="wrapper">
      <button onClick={decrease}>-</button>
      <span className="count">{count}</span>
      <button onClick={increase}>+</button>
    </div>
  );
};

const App = () => {
  const [count, setCount] = useState(0);

  const increase = () => {
    setCount(count + 1);
  };
  const decrease = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <CountContext.Provider
        value={{ count, increase, decrease }}
      >
        <Counter />
      </CountContext.Provider>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"))