Different ways of using React Context API

ContextApp1.js

//Use React Context + Provider/Consumer - Works with both Functional and Class Components
import React from 'react';

const Context = React.createContext();

const ContextApp = () => {
  return (
    <Context.Provider value={['THE', 'QUICK', 'BROWN', 'FOX', 'JUMPS', 'OVER', 'THE', 'LAZY', 'DOG']}>
        <CustomComponent/>
    </Context.Provider>
  )
}

const CustomComponent = () => {
  return (
    <Context.Consumer>
        {
          (items) => {
            return <div>{items.map((item) => <li>{item}</li>)}</div>
          }
        }
      </Context.Consumer>
  )
}

ContextApp2.js

//Use React Context + Set ContextType - Works only with Class Components
import React from 'react';

const Context = React.createContext();

const ContextApp = () => {
  return (
    <Context.Provider value={['THE', 'QUICK', 'BROWN', 'FOX', 'JUMPS', 'OVER', 'THE', 'LAZY', 'DOG']}>
        <CustomComponent/>
    </Context.Provider>
  )
}

class CustomComponent  extends React.Component {    
  render(){
      let context = this.context      
      return(<div>{context.map((item) => <li>{item}</li>)}</div>)
  }  
}

CustomComponent.contextType = Context

ContextApp3.js

//Use React Context + useContext Hook - Works only with Functional Components

import React,{useContext} from 'react';

const Context = React.createContext();

const ContextApp = () => {
  return (
    <Context.Provider value={['THE', 'QUICK', 'BROWN', 'FOX', 'JUMPS', 'OVER', 'THE', 'LAZY', 'DOG']}>
        <CustomComponent/>
    </Context.Provider>
  )
}

const CustomComponent = () => {
  let context = useContext(Context)
  return (<div>{context.map((item) => <li>{item}</li>)}</div>)      
}

ContextApp4.js

//Use React Context + Access Static ContextType - Works only with Class Components

import React from 'react';

const Context = React.createContext();

const ContextApp = () => {
  return (
    <Context.Provider value={['THE', 'QUICK', 'BROWN', 'FOX', 'JUMPS', 'OVER', 'THE', 'LAZY', 'DOG']}>
        <CustomComponent/>
    </Context.Provider>
  )
}

class CustomComponent  extends React.Component {    
  static contextType = Context

  render(){
      let context = this.context      
      return(<div>{context.map((item) => <li>{item}</li>)}</div>)
  }  
}