React context api example using hooks (function based components)

reactContextAPI_Example.js

// https://youtu.be/6uBgda52yEo

import React, {useState, setState } from 'react';
import { render } from 'react-dom';

export const FruitContext = React.createContext('Apple');

const Index = () => {
  const [fruit, setFruit] = useState('Apple');
  
  return (
    <FruitContext.Provider value={[fruit, setFruit]}>
      <App />
    </FruitContext.Provider>
    );
}

export const App = () => {
  const [fruit, setFruit] = useContext(FruitContext);
  
  render(
    <div>
      <h1>React Hooks In Context</h1>
      <h1>Today's Fruit is {fruit}</h1>
    </div>
  )
}

render (<Index />, document.getElementById('root'));