The State Hook in LoginForm Component

In React application there is a local state and store state (state of the application).

I can change the local state within the component by using the State hook. “Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.”(https://reactjs.org/docs/hooks-state.html)

First I imported it

import { useState } from ‘react’;

Then I set the username and password to an empty string.

const [username, setUsername] = useState(‘’);

const [password, setPassword] = useState(‘’);

I created a form and set the values to username and password which is an empty string for now; onChange event to setUsername and setPassword to hold the values of user’s input when username and password are entered: event.target.value .

<input type=”text” value={username} onChange={(e) => setUsername(e.target.value)} className=”input” placeholder=”Username” required />

<input type=”password” value={password} onChange={(e) => setPassword(e.target.value)} className=”input” placeholder=”Password” required />

I added some great features such as localStorage.setItem to store the username and password. I can access these key value pairs in Application, Local Storage where keys are username and password, values are the inputs from the user.

localStorage.setItem(‘username’, username);

localStorage.setItem(‘password’, password);

To reload:

window.location.reload();

When there is no username after page reloads my LoginForm comes up.

if(!localStorage.getItem(‘username’)) return <LoginForm />

Happy coding!