import React, { useState, useContext } from "react";
import ReactDOM from "react-dom";
import createContainer from "constate";

function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  return { count, increment, decrement };
}

const CounterContainer = createContainer(useCounter);

function ButtonIncr() {
  const { increment } = useContext(CounterContainer.Context);
  return <button onClick={increment}>+</button>;
}
function ButtonDecr() {
  const { decrement } = useContext(CounterContainer.Context);
  return <button onClick={decrement}>-</button>;
}

function Count() {
  const { count } = useContext(CounterContainer.Context);
  return <span>{count}</span>;
}

const Counter = () =>
    <CounterContainer.Provider>
      <Count />
      <ButtonIncr />
      <ButtonDecr />
    </CounterContainer.Provider>


const rootElement = document.getElementById("root");
ReactDOM.render(<Counter />, rootElement);