Different ways on how to use traditional Context and useContext Hook in React

ComponentA.js

import React from 'react'
import ComponentB from './ComponentB'
const ComponentA = () => {
    return (
        <div>
            <div>ComponentA</div>
            <ComponentB />
        </div>
    )
}

export default ComponentA

ComponentB.js

import React, { useContext } from 'react'
import ComponentC from './ComponentC'
import { NameContext, ColorContext } from '../Parent'
const ComponentB = () => {
    const name = useContext(NameContext)
    const color = useContext(ColorContext)
    return (
        <div>
            <div>ComponentB</div>
            <div>name: {name} color: {color} </div>
            <ComponentC />
        </div>
    )
}

export default ComponentB

ComponentC.js

import React from 'react'
import { NameContext, ColorContext } from '../Parent'
const ComponentC = () => {
    return (
        <div>
            <div>ComponentC</div>
            <NameContext.Consumer>
                {name => {
                    return (
                        <ColorContext.Consumer>
                            {color => (
                                <div>name: {name}, color {color}</div>
                            )}
                        </ColorContext.Consumer>
                    )
                }}
            </NameContext.Consumer>

        </div>
    )
}

export default ComponentC;

Parent.js

import React from 'react';
import ComponentA from './components/ComponentA'
export const NameContext = React.createContext()
export const ColorContext = React.createContext()
function Parent() {
  return (
    <div>
      <NameContext.Provider value={'Smith'}>
        <ColorContext.Provider value={'red'}>
          <ComponentA />
        </ColorContext.Provider>
      </NameContext.Provider>
    </div>
  );
}

export default Parent;