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!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ludmila Korchnoy

Hello World! I’m a Full stack web developer experienced in Ruby and JavaScript frameworks. I graduated Flatiron School in October of 2020.