useContext / createContext (Provider)

 14. create AuthContext

resources/js/contexts/AuthContext.js

import React, { createContext } from 'react'

 

export const AuthContext = createContext();

Main.js

import React, { useState, useEffect } from 'react';

import ReactDOM from 'react-dom';

import { BrowserRouter, Routes, Route } from 'react-router-dom';

import LoginView from './views/LoginView';

import HomeView from './views/HomeView';

import { AuthContext } from '../contexts/AuthContext';

 

function Main(props) {

 

  

   const [authStatus, setAuthStatus] = useState('loading');

 

   useEffect(() => {

       console.log(authStatus);

   }, [authStatus])

 

   return (

       <>

           <BrowserRouter>

               <AuthContext.Provider value={ {authStatus, setAuthStatus} }>

                   <Routes>

                       <Route path='/' element={<LoginView token={props.token} route_root={props.route_root} />} />

                       <Route path='/rhome' element={<HomeView />} />

                   </Routes>

               </AuthContext.Provider>

           </BrowserRouter>

       </>

   );

}

 

export default Main;

 

if (document.getElementById('main')) {

   var _token = document.getElementById('main').getAttribute('token');

   var _route_root = document.getElementById('main').getAttribute('route_root');

   ReactDOM.render(<Main token={_token} route_root={_route_root} />, document.getElementById('main'));

}

 

LoginView.js

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

import ReactDOM from 'react-dom';

import { handleSubmit } from '../viewmodels/LoginVM';

import { AuthContext } from '../../contexts/AuthContext';

 

export default function LoginView(props) {

   const [email, setEmail] = useState('');

   const [password, setPassword] = useState('');

  

   const {authStatus, setAuthStatus} = useContext(AuthContext);

 

   return (

       <div className="container">

           <br />

           <div className="card" >

               <div className="card-body">

                   <h5 className="card-title">Login</h5>

                   <label for="email">Email:</label><br />

                   <input type="text" value={email} onChange={e => setEmail(e.target.value)} name="email" /><br />

                   <label for="password">Password:</label><br />

                   <input type="text" value={password}

                       onChange={e => { setPassword(e.target.value); }}

                       onKeyDown={e => { e.key === 'Enter' ? handleSubmit(

                           email, password, props.token, props.route_root, setAuthStatus) : () => { } }}

                   /><br /><br />

                   <button className='btn btn-primary' onClick={() => handleSubmit(

                       email, password, props.token, props.route_root, setAuthStatus)}>Submit</button>

               </div>

           </div>

       </div>

 

   )

}

 

------------------------------------------------------------------------------

You can add more useState & state to the context

import React, { createContext } from 'react'

export const GlobalContext = createContext();

const [A, setA] = useState('a');

const [B, setB] = useState('b');

const [C, setC] = useState('c');

useEffect(() => {

setToken(props.token);

}, [])

return (

<>

<BrowserRouter>

<GlobalContext.Provider value={{ A, setA, B, setB, C, setC }}>

const { A, setA, B, setB, C, setC } = useContext(GlobalContext);