Working with forms and form elements can be complicated when developing with React because HTML form elements in React behave somewhat differently than other DOM elements.
Learn how to work with forms and form elements, such as checkboxes, textareas, and single-line text input.
Managing input fields in forms
In React, managing an input field in a form is often accomplished by creating a state and binding it to the input field.
Above we have a FirstName state, an OnInput event, and a HandleChanged handler. The HandleChanged function runs on each keystroke to update the FirstName position.
This approach may be ideal when working with a single input field, but creating separate condition and handler functions for each input element will become repetitive when working with multiple input fields.
To avoid writing repetitive and unnecessary code in such situations, give each input field a different name, set an object as the initial state value of your form, and then give the object properties with the same names as the input fields. Fill with
FormData will serve as a state variable to manage and update all the input fields inside the form. Make sure that the names of the properties in the state object are the same as the names of the input elements.
To update the state with the input data, add an input event listener to the input element, then call your created handler function.
The code block above uses an on-input event and a handler function, handleFirstNameChange. This handleFirstNameChange function will update the state properties when called. State properties will have the same values as their corresponding input elements.
transform your input into controlled components
When an HTML form is submitted, its default behavior is to navigate to a new page in the browser.
With index.html files, form elements maintain track of their state and modify it in response to user input. With React, the setState function modifies a dynamic state stored in the component’s state property.
You can combine both states by making React state a single source of truth. Thus, the component that creates the form controls what happens when a user enters data. Input form elements with values that are React controls are called controlled components or controlled inputs.
The value properties of input elements are now set as the values of the corresponding state properties. When using a controlled component the value of the input is always determined by the state.
handling textarea input element
The textarea element is like any regular input element, but holds multi-line input. This is useful when passing information that requires more than one line.
The textarea tag has a value attribute that stores the information the user entered into the textarea element. This makes it act like the default React input element.
Working with React’s Checkbox Input Element
Things are a bit different when working with checkbox inputs. Input fields of checkbox type do not have a value attribute. However, it has a check feature. This checked attribute differs from the value attribute in that it requires a boolean value to determine whether the box is checked or unchecked.
The label element refers to the ID of the input element using the htmlFor attribute. This htmlFor attribute takes the ID of the input element – in this case, join. When creating an HTML form, the htmlFor attribute represents the for attribute.
Checkboxes are better used as controlled inputs. You can achieve this by creating a state and assigning it an initial boolean value of true or false.
You should include two props on the checkbox input element: an onChange event with a Checked property and a handler function, which will set the state’s value using the setIsChecked() function.
This code block generates a checked condition, and sets its initial value to false. This sets the value of isChecked to the checked attribute in the input element. Whenever you click on the checkbox the handleChanged function will fire and change the state value of isChecked to vice versa.
A form element can contain multiple input elements of different types, such as checkboxes, text, etc.
In such cases, you can handle them the same way you handled multiple input elements of the same type.