useContexthookreact1

 context folder:

1:ThemeContext.js

import React from "react";

const ThemeContext=React.createContext()

export default ThemeContext;

2:ThemeContextProvider.js

import { useContext, useState } from 'react';

import ThemeContext from './ThemeContext';

export default function ThemeContextProvider({ children }) {

  // const level = useContext(UserContext);

  const [state,setState]=useState('red');

 

  return (

   

      <ThemeContext.Provider value={{state,setState}}>

        {children}

      </ThemeContext.Provider>

   

  );

}

3:componet folder

A:Component1.jsx

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

import ThemeContext from '../assets/context/ThemeContext';

export default function Component1() {

   

const {setState}=useContext(ThemeContext);

    const handleSubmit=(e)=>{

        e.preventDefault();

         setState('blue')

}

    return (

    <div>

    <h2>login</h2>

       

        <button onClick={handleSubmit}>submit</button>

    </div>

)

}

B:

import React,{useContext, useEffect} from 'react'

import ThemeContext from '../assets/context/ThemeContext';

export default function Component2() {

     const {state}=useContext(ThemeContext);

     console.log(state);

    // if(!state)return <div>please  sir login</div>

    // return <h1>welcome login</h1>

    useEffect(()=>{

        console.log('hello');

    },[state])

  return (

    <div >Profile

        <h1  style={{'backgroundColor':`${state}`}}>good</h1>

    </div>

  )

}

App.jsx:

insidediv:

import Component1 from './Components/Component1';

import Component2 from  './Components/Component2';

import ThemeContextProvider from './assets/context/ThemeContextProvider';

 <ThemeContextProvider>

<h1>goodmorning</h1>

<Component1/>

<Component2/>

</ThemeContextProvider>