useContext() in React tut 12

useContext() in React

We can use useContext to receive the data directly from context provider instead of using complex

context consumer 

file hierchy : 

ContextAPI.jsx ==> ComA.jsx ==> comB.jsx 

 

we are sending data directly from ContextAPI.jsx to ComB.jsx.

File : ContextAPI.jsx

import React, { createContext } from 'react';

import ComA from './ComA';

var FilmName = createContext();

var Earned = createContext();

let ContextAPI = () => {

    return (

        <>

            <FilmName.Provider value={'GolMaal film'}>

                <Earned.Provider value={'25 crore'}>

                    <ComA />

                </Earned.Provider>

            </FilmName.Provider>

        </>

    )

}

export default ContextAPI;

export { FilmName , Earned };

File : ComA.jsx

import React from 'react';

import ComB from './ComB';

let ComA   = ()=>{

    return(

        <>

           <ComB/>

        </>

    )

}

export default ComA  ;

File: ComB.jsx

import React, { useContext } from 'react';

import { FilmName, Earned } from './ContextAPI'; //first step

let  ComB  = ()=>{

   const film = useContext(FilmName); // Second step

   const earn = useContext(Earned);

    return(

        <>

         {/* Here we are using the useContext to retrive data easily from 

ContextAPI.jsx  */}

         <div style={{color:"red"}}>

             <h1>use of useContext</h1>

             <h2>FilmName : {film} </h2>

             <h3>Earned : {earn} </h3>

             <p>Above data is from ComB</p>

             <br/>

         </div>

      

        </>

    )

}

export default ComB  ;