Learn React Hooks

Adding multiple Hooks to our component

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 ...