Forms — JS: React

• Text area
• Drop-down list
• Checkbox and radio button
• Template code

Forms in HTML work a little differently from forms in React because they have their internal state in HTML. It is 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 when we change the name field. The state will be sent to the correct address when we send the form.

Unlike working directly with the DOM, in React, the source of truth is the state. Forms are no exception. Any change to the form, character by character, if it is an input, must be transferred to the state. And form elements that have data stored in their 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 do not need the form since all the data is already in the state.

Therefore, when sending a form, it is 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 ones. With this approach, we store the state of the form in the DOM. This method is only needed when we integrate with third-party libraries or work on legacy code. In a normal situation, you would not need it.

Text area

In HTML, the value of <textarea> 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, we extract the data from the form element in the usual way through e.target.value. Then, like always, the data is updated in the state.

Drop-down list

In HTML, we select the current element using the selected placing it 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 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 we set it, 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 simple, but there's plenty of the same code everywhere. That is why many libraries for React allow you to automate form-state preservation.

Recommended materials

1. Forms