Forms — JS: React

Forms in HTML work a little differently from forms in React. This is because in HTML, they have their own internal state- a place where form values, texts, selected options, and other things are stored.

<form action="">
  <label>
    Name:
    <input type="text" name="name" />
  </label>
  <input type="submit" value="Submit" />
</form>

The form above changes its internal state each time the name field is changed. The state will be sent to the correct address when the form is sent.

Unlike working directly with the DOM (even through jQuery), in React, the source of truth is the state, not the DOM. Forms are no exception. Any change to the form, character by character, if it's an input, must be transferred to the state. And form elements whose data are stored in the React state are called controlled components.

See the Pen js_react_forms_input by Hexlet (@hexlet) on CodePen.

In the code above, for every change to an input element, the contents are fetched via e.target.value and written to React. Submissions made after the initial submission don;t need the form itself, since all the data is already in the state. Therefore, when sending a form, it's sufficient to get the required data from the state object and send it, e.g., to the server. Note that form elements only become controlled components when their values are substituted from React: <input value={this.state.text} />.

One of the many advantages of controlled components is that it becomes very straightforward to filter or validate. For example, if you need to enter data in upper case (for example, when entering card data), you can do it like so:

handleChange = (e) => {
  this.setState({ value: e.target.value.toUpperCase() });
}

As well as controlled components, React also allows you to use uncontrolled components. With this approach, the state of the form is stored in the DOM itself. This method is only needed for integration with third-party libraries or for working with legacy code. In a normal situation, you wouldn't need it.

Text area

In HTML <textarea>s value is its contents:

<textarea>
  Like this
</textarea>

React uses the value attribute for this value:

See the Pen js_react_forms by Hexlet (@hexlet) on CodePen.

It's worth noting that the onChange event in React works as expected, unlike onChange in HTML, which only triggers when the element loses focus. Therefore, an event is guaranteed to occur for every change. In this case, the data from the form element is extracted in the usual way through e.target.value. Then, like always, the data is updated in the state.

Drop-down list

In HTML, the current element is selected using the selected, which is placed on the desired option.

<select>
  <option value="">Select a fruit</option>
  <option value="grapefruit">Grapefruit</option>
  <option value="lime">Lime</option>
  <option selected value="coconut">Coconut</option>
  <option value="mango">Mango</option>
</select>

React offers another, simpler and more convenient way. It's enough to set the select component's value attribute to the desired value.

See the Pen js_react_forms_select by Hexlet (@hexlet) on CodePen.

Checkbox and radio button

Both of these types support the checked attribute. If it's set, the item is marked as selected.

<input name="isGoing" type="checkbox" checked={this.state.isGoing} onChange={this.handleChange} />

Template code

Working with forms in React is quite a time-consuming task. Everything is very simple, but there's a lot of the same code everywhere. That's why there are many libraries for React that allow you to automate form state preservation.

Recommended materials

1. Forms

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.