Controlled Components

The same law applies for the input field as applied for unidirectional data flows, which updates the local state with the searchTerm to filter the list. When the state changes, the render() method runs again and uses the recent searchTerm from the local state to apply the filter condition.

But didn’t we forget something in the input element? An HTML input tag comes with a value attribute. The value attribute usually contains the value shown in the input field. In this case, that is the searchTerm property. Form elements such as <input>, <textarea>, and <select> hold their own state in plain HTML. They modify the value internally once someone changes it from the outside. In React, that’s called an uncontrolled component, because it handles its own state. We want to make sure those elements are controlled components instead.

To do this, we set the value attribute of the input field, which is already saved in the searchTerm state property, so we can access it from there: