Forms

Controlled Components

In HTML, form elements such as , , and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().</select>

We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.

The Textarea tag

In React, a uses a value attribute instead. This way, a form using a <textarea> can be written very similarly to a form that uses a single-line input

The select tag

React, uses a value attribute on the root select tag. This is more convenient in a controlled component because you only need to update it in one place.

The file input Tag

in React. It is discussed together with other uncontrolled components later in the documentation. In React, an is always an uncontrolled component because its value can only be set by a user, and not programmatically.

You should use the File API to interact with the files.

The Conditional (Ternary) Operator Explained