There are 2 approaches to access the value of an input element in React.

In the first approach, named uncontrolled input, you access the value from a reference to the input element.

The second approach, which I like because it doesn’t use references, is using a controlled input. Let’s see how to design controlled inputs using React hooks.

1. The controlled input

A good way to understand how controlled inputs works is by studying an example.

A web page consists of a list of employees’ names. Your task is to add an input field on this page. When the user types into this field the list of employees is filtered by the names that contain the typed query.

#react #input #hook #react hooks