contextType.tsx

import React, { useState, Component } from 'react'

export const NameContext = React.createContext()

export const NameContextProvider = ({ children }) => {
    const [name, setName] = useState('Moshood')
    return (
      <NameContext.Provider value={{ name, setName }}>
        {children}
      </NameContext.Provider>
    )
}

function App () {
  return (
    <NameContextProvider>
      <Parent />
    </NameContextProvider>
  )
}
function Parent () {  
  return (
    <FirstLevelChild />
  )
}

function FirstLevelChild (){
  return (
    <SecondLevelChild />
  )
}

function SecondLevelChild (){
  return (
    <ThirdLevelChild />
  )
}

class ThirdLevelChild extends Component {
  render (
    <div>`My name is ${this.context.name}`</>
  )
}
ThirdLevelChild.contextType = NameContext