React Forms

Introduction to React Forms

Form data in React is generally controlled by the components. Data is stored in a component state when it is handled by components. By including event handlers in the onChange property, changes can be controlled, and the state of the variable will be updated as a result.

There are several components, ranging from login screens to checkout pages where users can enter and submit information directly. In React applications you don't submit the form information directly to a server, since React is a single-page application, or SPA, which loads a single page where new data is dynamically displayed. You'll instead capture the form information on the client side, send the data or display the data using JavaScript.

With React forms, you have the option of allowing the browser to handle the majority of the form elements and collect data through React change events. In addition, you can use React directly to set and update input values. React does not set the value in the first approach, so it is called an uncontrolled component. Because React actively updates the input in the second approach, it is referred to as a controlled component.

When working with forms that require complicated logic, creating forms in React can quickly turn into a time-consuming and repetitive process. The form's data must be handled, validated, and configured to display an error message when input is invalid. You must also have the ability to restore the form to its default state when necessary.

When you start working with large and complex forms in your projects, you'll quickly discover that you need a straightforward and effective way to design forms.  To reduce the difficulties of creating forms with React, you can use a variety of form libraries.

Prerequisites

• NodeJS must be installed and running in your development environment. 
• A React development environment configured with Create React App, with all non-essential boilerplate removed.
• React events and hooks, such as the useState and useReducer Hooks, will be used. You can start learning about events in our JavaScript Events article.
• In addition, you'll need a basic understanding of HTML and JavaScript, which you can discover in our Building a Portfolio using HTML and What is a Callback Function in Javascript?, respectively.
• It would also be beneficial to have a basic understanding of CSS, which is available on Styling a Portfolio Using CSS. 

Adding Forms in React

You can add a form in React like all other elements.

Example:

If we run the code above, the page will reload and the form will be sent. But in React, this is typically not what we want to happen.

To let React handle the form, we want to eliminate this default behaviour.

Handling Forms

Form handling refers to how you deal with the data when it is submitted or the value changes.

The DOM typically handles form data in HTML. The components in React handle the form data. All of the information is kept in the component state when it is handled by the components.

By including event handlers in the onChange attribute, you can manage changes. The useState Hook can be used to keep track of each input value.

Example:

Submitting Forms

By including an event handler handleSubmit in the onSubmit element of the form, you can manage the submit action in React forms:

Example:

Controlled Components

Form components in HTML often keep track of their state and change it in response to user input. In the controlled component, the component manages the input form element instead of the DOM. The state property stores the mutable state, which is only modified using the setState() method.

Rather than only grabbing data once, when you click a submit button, controlled components govern the data passing through them on every onChange event. Then, using the setState() method, this data is modified and stored in the state. As a result, the component has superior control over the data and form components.

Using props, controlled components obtain their current value and notify changes via callbacks. To control these changes, the parent component must handle the callback, manage its state, and then pass the new values to its controlled components as props.

Example:

Collecting Form Data Using Uncontrolled Components

The uncontrolled input is equivalent to standard HTML form inputs. Data from the form is managed by the DOM itself. When the input value changes, the HTML components in this case maintain their own state, which is updated. You must use a ref to access form values from the DOM while writing an uncontrolled component. For each state modification, there is hence no need to create an event handler. The form's input field value can be accessed from the DOM using a ref.

Example:

The textarea Tag

The text of an HTML "textarea" element is defined by the text of its children:

The <textarea> in React uses a value attribute to dynamically update the value in its element. This makes it possible to write a form with a textarea in a manner that is quite similar to writing a form with a single-line input.

Code:

The select Tag

The HTML tag select produces a drop-down menu. This HTML, for instance, generates a drop-down list of fruits:

Due to the attribute selected, the Banana option is chosen originally. In React, the root select tag uses a value attribute instead of this selected attribute. Controlled components are easier to maintain because you only have to update them once. For example:

Code:

The file input Tag

JavaScript enables the upload or manipulation of one or more files from the user's device storage via an in HTML.

React recognizes this component as an uncontrolled one since its value is read-only.

Handling Multiple Inputs

If you have several controlled input elements that you need to manage, you can give each one a name attribute and allow the handler function to decide what it should do depending on the value of event.target.name.

For example:

Controlled Input Null Value

When a controlled component's value prop is specified, the user cannot change the input unless you want them to. It's possible that you unintentionally assign a value to undefined or null if you specify a value while the input is still modifiable.

The code shown below illustrates this. (The input is initially locked; after a little delay, it can be modified.)