Learn React Hooks

Login

In the Login component, we just ignore the Password field for now, and only process the Username field.

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

1. Edit src/user/Login.js, and import the useState Hook:

import React, { useState } from 'react'

2. Then, adjust the function definition to accept the setUser prop:

export default function Login ({ setUser }) {

3. Now, we define a new State Hook for the value of the Username field:

    const [ username, setUsername ] = useState('')

4. Next, we define a handler function:

    function handleUsername (evt) {        setUsername(evt.target.value)    }

5. Then, we adjust the input field, in order to use the username value, and call the handleUsername function when the input changes: