Learn React Hooks

The Login component

We have two input fields in the Login component: the Username and Password fields. We are now going to replace the State Hooks with Input Hooks.

Let's start implementing Input Hooks in the Login component now:

1. Import the useInput Hook at the beginning of the src/user/Login.js file:

import { useInput } from 'react-hookedup'

2. Then, we remove the following username State Hook:

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

It is replaced with an Input Hook, as follows:

    const { value: username, bindToInput: bindUsername } = useInput('')

Since we are using two Input Hooks, in order to avoid name collisions, we are using the rename syntax ({ from: to }) in object destructuring to rename the value key to username, and