Context API

App.jsx

import './App.css'
import './ChildC.jsx'
import {createContext} from "react";
import ChildC from "./ChildC.jsx";

const data = createContext()
const data1 = createContext()

function App() {
    const age = 23;
    const name = "Aditya Vijay";
  return (

    <>

        <data.Provider value={name}>
            <data1.Provider value={age}>
            <ChildC />
            </data1.Provider>
        </data.Provider>


    </>
  )
}

export default App
export {data, data1};

ChildA.jsx

function ChildA (){

    return(

        <>
      </>
      }

export default ChildC;

ChildB.jsx

function ChildB (){

    return(

        <>
      </>
      }

export default ChildB;

ChildC.jsx

import {data,data1} from './App.jsx';

function ChildC (){

    return(

        <>
            <data.Consumer>
                {

                    (name) => {

                        return(

                            <data1.Consumer>


                                {

                                    (age) => {

                                        return(

                                            <h1>I am {name} and my age is {age}.</h1>

                                        )

                                    }

                                }


                            </data1.Consumer>

                        )


                    }

                }



                </data.Consumer>

        </>
    )

}


export default ChildC;

FileStructure

- /
  - src
    - App.jsx
    - ChildA.jsx
    - ChildB.jsx
    - ChildC.jsx

notes.txt

we use context api to avoid the prop drilling.


The Context API in React helps avoid prop drilling by passing global variables throughout the codebase.

However, it can lead to nested consumers and callback hell when dealing with numerous data providers. To address this, utilize the 'useContext' React Hook for a cleaner solution

Run Command

npm run dev