MENU


Passing A Function

Similarly, with useContext() you can easily pass a callback such as a state update function deep down the component tree.
RESETRUNFULL
<!DOCTYPE html><html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  </head>
  <body>
    <div></div>
    <script type="text/babel">
      const MyContext = React.createContext(null);
      function Example() {
        const [count, setCount] = React.useState(0);
        return (<MyContext.Provider value={setCount}>
          <div><p>Counter: {count}</p>
            <A/>
          </div>
        </MyContext.Provider>);
      }
      function A(){ return <B/>; }
      function B(){ return <C/>; }
      function C(){ return <D/>; }
      function D(){ return <E/>; }
      function E(){
        const sc = React.useContext(MyContext);   // accessible by any inner function too
        return <button onClick={()=>sc(n=>(n+1))}>+1</button>;
      }
      const root = ReactDOM.createRoot(document.querySelector("div"));
      root.render(<Example/>);
    </script>
  </body></html>