Let's say we want to create a second field for the last name of the user, as follows:

1. We start by creating a new Hook at the beginning of our function, after the current Hook:

    const [ name, setName ] = useState('')
    const [ lastName, setLastName ] = useState('')

2. Then, we define another handleChange function:

    function handleLastNameChange (evt) {
        setLastName(evt.target.value)
    }

3. Next, we place the lastName variable after the first name:

            <h1>My name is: {name} {lastName}</h1>

4. Finally, we add another input field:

            <input type="text" value={lastName} onChange={handleLastNameChange}
   />

When we try this out, we are going to notice that our reimplemented Hook function uses the same value for both states, so we are always changing both fields at once.