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

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.box {
  border: 1px solid black;
  margin: 10px;
  text-align: center;
  padding: 10px;
  width: 400px;
}

.result {
  font-weight: bold;
  margin-top: 15px;
}

const { useState, useContext, createContext } = React

const testContext = createContext();

const NameModifier = () => {
  const { name, updateName } = useContext(testContext);
  return (
    <>
      <label>Enter a name: </label>
      <input type="text" value={name} onChange={updateName}/>
    </>
  )
};

const NamePrinter = () => {
  const { name } = useContext(testContext);
  return <div className="result">My name is {name}</div>
};

const App = () => {
  const { Provider } = testContext;
  const [name, setName] = useState("Milu");
  
  const updateName = e => setName(e.target.value);
  
  return (
    <section className="box">
      <Provider value={{ name, updateName }}>
        <NameModifier />
        <NamePrinter />
      </Provider>
    </section>
  
  );
};

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