import { useState, useContext, createContext } from "https://esm.sh/react";
import ReactDOM from "https://esm.sh/react-dom";

const initialState = {
  state: 'Some data...'
};

// usually export the context to be available for components
const CustomContext = createContext(initialState);

function App() {
  // parent
  return (
    <CustomContext.Provider value={initialState}>
      <ChildA />
    </CustomContext.Provider>
  )
}

function ChildA(props) {
  // child
  return (
      <ChildB />
  );
}

function ChildB(props) {
  // grandChild
  const {state} = useContext(CustomContext);
  return (
      <div>{state}</div>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));