To create a login functionality in a React.js application using the useContext
hook to store and manage the logged-in user, follow these steps:
Step 1: Set up a new React.js project.
Create a new directory for your project, navigate to it in a terminal, and run the following command to create a new React.js project:
npx create-react-app sampleapp
Step 2: Create a UserContext.
Inside the src
folder, create a new file named UserContext.js
and add the following code:
1 2 3 4 5 |
import { createContext } from 'react'; const UserContext = createContext(); export default UserContext; |
In the code above, we create a new context using the createContext
function from React. This context will be used to store the logged-in user.
Step 3: Create a Login component.
Inside the src
folder, create a new file named Login.js
and add the following code:
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 38 39 40 41 |
import React, { useContext, useState } from 'react'; import UserContext from './UserContext'; function Login() { const { setUser } = useContext(UserContext); const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const handleLogin = (e) => { e.preventDefault(); // Perform login authentication // Replace this with your own login logic if (username === 'admin' && password === 'password') { setUser({ username }); } }; return ( <div> <h2>Login</h2> <form onSubmit={handleLogin}> <input type="text" placeholder="Username" value={username} onChange={(e) => setUsername(e.target.value)} /> <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} /> <button type="submit">Login</button> </form> </div> ); } export default Login; |
In the code above, we import the necessary modules, including the UserContext
that we created earlier.
Inside the Login
component, we use the useContext
hook to access the setUser
function from the UserContext
. This function will be used to update the logged-in user.
The component includes a login form with inputs for username and password. The handleLogin
function is triggered when the form is submitted. Replace the login authentication logic with your own implementation. In this example, we perform a simple check for a hardcoded username and password combination. If the authentication is successful, we update the user using the setUser
function from the context.
Step 4: Create a Home component.
Inside the src
folder, create a new file named Home.js
and add the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React, { useContext } from 'react'; import UserContext from './UserContext'; function Home() { const { user } = useContext(UserContext); return ( <div> <h2>Welcome, {user.username}</h2> <button onClick={() => setUser(null)}>Logout</button> </div> ); } export default Home; |
Step 5: Update the App component.
Inside the src
folder, open the App.js
file and update it with the following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import React, { useState } from 'react'; import UserContext from './UserContext'; import Login from './Login'; import Home from './Home'; function App() { const [user, setUser] = useState(null); return ( <UserContext.Provider value={{ user, setUser }}> <div className="App"> {user ? <Home /> : <Login />} </div> </UserContext.Provider> ); } export default App; |
In the code above, we import the necessary modules, including the UserContext
and the Login
and Home
components.
Inside the App
component, we use the useState
hook to initialize the user
state variable as null
. The setUser
function is used to update the user
state.
We wrap the entire application with the UserContext.Provider
component and provide the user
and setUser
values to the context. This allows the components within the provider to access and modify the logged-in user.
The conditional rendering in the App
component displays either the Home
component or the Login
component based on whether the user is logged in or not.