Learn React Hooks

Register

For registration, we are additionally going to check whether the entered passwords are the same, and only then will we set the user value.

Let's start by modifying the Register component in order to make it dynamic:

1. First, we do the same steps as we did for Login, in order to handle the username field:

import React, { useState } from 'react'export default function Register ({ setUser }) {    const [ username, setUsername ] = useState('')    function handleUsername (evt) {        setUsername(evt.target.value)    }    return (        <form onSubmit={e => { e.preventDefault(); setUser(username) }}>            <label htmlFor="register-username">Username:</label>            <input type="text" value={username} onChange={handleUsername} name="register-username" id="register-username" ...