Bootstrap Snippet Context APi in REact using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <h2>Context</h2>
    </div>
</div>
// src/context/UserContext.js
import React, { createContext, useState, useContext } from 'react';
// Create the context
const UserContext = createContext();
// Create a provider component
export const UserProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const login = (userData) => {
    setUser(userData);
  };
  const logout = () => {
    setUser(null);
  };
  return (
    <UserContext.Provider value={{ user, login, logout }}>
      {children}
    </UserContext.Provider>
  );
};
// Custom hook to access the context
export const useUser = () => {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<UserProvider>
      <App />
    </UserProvider>,
    
    /*HOme Com ponent*/
    
    import React, { useState } from 'react'
import { useUser } from '../context/context';
const Home = () => {
    const { login } = useUser();
    const [userName, setUserName] = useState('');
    const handleLogin = () => {
        const userData = { name: userName }; // Simulated user data
        login(userData);
    };
    return (
        <>
            <div>
                <input
                    type="text"
                    value={userName}
                    onChange={(e) => setUserName(e.target.value)}
                    placeholder="Enter your name"
                />
                <button onClick={handleLogin}>Login</button>
            </div>
        </>
    )
}
export default Home
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React from 'react'
import { useUser } from '../context/context';
const Private = () => {
  const { user, logout } = useUser();
  return (
    <>
      <div>
        {user ? (
          <>
            <h1>{user.name}</h1>
            <button onClick={logout}>Logout</button>
          </>
        ) : (
          <p>Please log in</p>
        )}
      </div>
    </>
  )
}
export default Private
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Context APi in REact"
Bootstrap 4.1.1 Snippet by Arjunverma

Related: See More

Questions / Comments:

"Context APi in REact" Bootstrap 4.1.1 Snippet by Arjunverma

Related: See More

Questions / Comments:

"Context APi in REact"
Bootstrap 4.1.1 Snippet by Arjunverma