Context API in React JS

 Context API in React JS

• React hooks provides a concept call Context.
• React Context API allows you to easily access data at different levels of the components tree, without passing prop to every level.

Steps:

1. createContext()
2. provider
3. consumer

Source Code:-

App.js

import React, { createContext } from 'react'
import ComC from './componunt/ComA'
const FirstName = createContext();
export default function App() {
  return (
    <>
      <FirstName.Provider value={'shreyash'}>
         <ComC />
      </FirstName.Provider>
    </>
  )
}
export {FirstName};

ComC.js

import React from 'react'
import { FirstName } from '../App'
export default function ComC() {
    return (
        <>
            <FirstName.Consumer>
                {(fname)=>{
                return <h1>My name is {fname}</h1>
                }}
            </FirstName.Consumer>
        </>
    )
}

Two values

App.js

import React, { createContext } from 'react'
import ComC from './componunt/ComA'
const FirstName = createContext();
const LastName = createContext();
export default function App() {
  return (
    <>
      <FirstName.Provider value={'shreyash'}>
      <LastName.Provider value={'kolhe'}>
         <ComC />
         </LastName.Provider>
      </FirstName.Provider>
    </>
  )
}
export {FirstName, LastName};

ComC.js

import React from 'react'
import { FirstName, LastName } from '../App'
export default function ComC() {
    return (
        <>
            <FirstName.Consumer>
                {(fname)=>{
                    return(
                        <LastName.Consumer>
                            {(lname)=>{
                                return(
                                    <h1>My name is {fname} {lname}</h1>
                                )
                            }}
                        </LastName.Consumer>
                    )
                }}
            </FirstName.Consumer>
        </>
    )
}