useContext.js

useContext.js

import React, {useState, useContext} from 'react';

const Context = React.createContext()
const App = () => {
 const [fontSize, updateFontSize] = useState(14);
  
 return (
   <Context.Provider value={{fontSize: fontSize, updateFontSize: (val) => updateFontSize(val)}}>
      <Child1></Child1>
   <Context.Provider>
  ) 
}
const Child1 = () => {
  //Nothing to do with context
 return (
   <Child2></Child2>
  ) 
}
const Child2 = () => {
  //Nothing to do with context
 return (
   <Child3></Child3>
  ) 
}

const Child3 = () => {
 //want to access the context
  const {fontSize, updateFontSize} = useContext(Context);
 return (
   <input value={fontSize} onChange={(e) => updateFontSize(e.target.value)}></input>
  ) 
}
export default App