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.
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.
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.
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} />
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.
The Hexlet support team or other students will answer you.
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.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
From a novice to a developer. Get a job or your money back!
Sign up or sign in
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.