ReactJS Context API

 Context API 

        Clean and easy way to share state between components without having to pass props. 

React Hooks provides concept Call Context.

React Context API allows you to easily access data at different levels of the component tree, without passing props to every level.

App.js

import { createContext } from 'react';
import './App.css';
import CompA from './CompA';

const First = createContext();
function App() {
  return (
    <>
      <First.Provider value={"shreyash Kolhe"}>
        <CompA />
      </First.Provider>
    </>
  );
}

export default App;
export {First};

CompA.js

import React from 'react'
import CompB from './CompB'

export default function CompA() {
    return (
        <div>
            <CompB/>
        </div>
    )
}

CompB.js

import React from 'react'
import { First } from './App'

export default function CompB() {
    return (
        <div>
            <First.Consumer>{(value)=>{
              return  <h1>Hello,i'm {value}</h1>
            }}

            </First.Consumer>
        </div>
    )
}

Output

Send Multiple Value using Context API

App.js

import { createContext } from 'react';
import './App.css';
import CompA from './CompA';
const First = createContext();
const Last = createContext();
function App() {
  return (
    <>
      <First.Provider value={"shreyash "}>
        <Last.Provider value={"kolhe"}>
          <CompA />
        </Last.Provider>
      </First.Provider>
    </>
  );
}
export default App;
export { First,Last };

CompA.js

import React from 'react'
import CompB from './CompB'
export default function CompA() {
    return (
        <div>
            <CompB/>
        </div>
    )
}

CompB.js

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

Output