Register to get access to free programming courses with interactive exercises

Forms JS: React

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.

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

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

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
profession
Development of front-end components for web applications
10 months
from scratch
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.