Playing with react Context hook, in playcode.io/react

react-context.js

import React from 'react';

const Ctx = React.createContext();

function Editor(props) {
  const [value, setValue] = React.useContext(Ctx);
  return (
    <input type="number" value={value} onChange={React.useCallback(e => setValue(e.target.value), [])} />
  );
}

function Viewer(props) {
  const [value, setValue] = React.useContext(Ctx);
  return (
    <p>Value is <code>{value}</code></p>
  );
}

export function App(props) {
  const valueHook = React.useState(42);
  const [value, setValue] = valueHook;
  return (
    <Ctx.Provider value={valueHook}>
     <div style={{ background: "black", color: "white", padding: "20px" }}>
        <Editor />
        <Viewer />
      </div>
    </Ctx.Provider>
  );
}