usecontexthookprojecthitesh

 1.context folder:

file:

A:UserContext.js

import React from "react";

const UserContext=React.createContext()

export default UserContext;

B:UserContextProvider.jsx

//store...

import { useContext, useState } from 'react';

import UserContext from './UserContext';

export default function UserContextProvider({ children }) {

  // const level = useContext(UserContext);

  const [state,setState]=useState(null);

 

  return (

   

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

        {children}

      </UserContext.Provider>

   

  );

}

2:componentfolder:

A:Login.jsx:

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

    import UserContext from '../assets/context/UserContext'

    export default function Login() {

    const [username, setusername] = useState('');

    const [userpass, setuserpass] = useState('');

       

    const {setState}=useContext(UserContext);

        const handleSubmit=(e)=>{

            e.preventDefault();

            setState({username,userpass})

    }

        return (

        <div>

        <h2>login</h2>

            <input type="text" name="username"

            value={username} onChange={(e)=>setusername(e.target.value)} placeholder='username' />

            <input type="password" name="userpass" placeholder="userpass"

            value={userpass} onChange={(e)=>setuserpass(e.target.value)} />

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

        </div>

    )

    }

B:Profile.jsx:

import React,{useContext} from 'react'

import UserContext from '../assets/context/UserContext'

export default function Profile() {

    const {state}=useContext(UserContext);

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

    return <h1>welcome login</h1>

  return (

    <div>Profile</div>

  )

}

App.js:

render:

<div>

      <UserContextProvider>

<h1>goodmorning</h1>

<Login/>

<Profile/>

</UserContextProvider>

..