React Forms
React, like HTML, uses forms to allow users to interact with online pages.
Adding Forms in React
You may add a form to React like any other element:
Example
Add a form where people can enter their names:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyForm />);
This will proceed normally, with the form being submitted and the website refreshing.
However, this is not the desired outcome in React.
We want to disable the default behavior and let React control the form.
Handling Forms
Handling forms refers to how you handle data as it changes value or is submitted.
In HTML, form data is typically handled by the DOM.
In React, form data is typically handled by components.
When data is handled by components, it is all saved in the component’s state.
You can control changes by specifying event handlers in the onChange attribute.
The useState Hook allows us to keep track of each input value and create a “single source of truth” for the entire program.
Hooks are discussed in further detail in the React Hooks section.
Example
Use the useState Hook to manage the input.
------ EXAMPLE MUKAVU -----
Submitting Forms
To control the submit action, add an event handler to the onSubmit attribute of the <form>.
Example:
Add a submit button and an event handler to the onSubmit attribute.
------ EXAMPLE MUKAVU -----
Multiple Input Fields
You can control the values of multiple input fields by assigning a name attribute to each element.
We’ll start our state with an empty object.
To access the event handler’s fields, use the event.target.name and event.target.value syntax.
To change the status, place square brackets [bracket notation] around the property name.
Example:
Create a form containing two input fields:
Note: We use the same event handler function for both input fields; we could create one for each, but this results in much cleaner code and is the preferred method in React.
------ EXAMPLE MUKAVU -----
Textarea
The textarea element in React differs slightly from standard HTML.
In HTML, a textarea’s value was the text between the start tag <textarea> and end tag </textarea>.
<textarea>
Content of the textarea.
</textarea>
In React, the value of a textarea is stored in the value attribute. To manage the textarea’s value, we’ll utilize the useState Hook.
Example:
A simple textarea with some content:
------ EXAMPLE MUKAVU -----
Select
A drop down list, also known as a pick box in React, differs from HTML.
In HTML, the selected value in the drop down list was defined with the choose attribute:
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>
In React, the selected value is defined by the value attribute on the choose tag:
Example:
A simple select box, with the selected value “Volvo” initialized in the constructor:
------ EXAMPLE MUKAVU -----
Making little tweaks to <textarea> and <select> allows React to handle all input components uniformly.
