Introduction
Forms are an essential part of web application development. You can find forms on almost every website you visit. Forms are important because they are used to handle input from the users. Websites will not function properly if there is no way for input handling.
Input can be taken in various forms. The most common type of input is text input. Other forms of input are checkboxes, radio buttons, and ranges.
In React, forms are created like they are created in HTML. The most important part of forms in React is handling them. In this article, we will discuss how to create forms in React and handle them.
React forms
In React, we have to create forms in JSX which are more or less similar to HTML forms. After that, we will use the event handlers and React state to handle the inputs.
Creating a form in JSX.
Observe the following code.
export default function App() {
return (
<div className="App">
<h2> Register here! </h2>
<form>
<label>
{" "}
Name: <input type="text" />
</label>
<label>
{" "}
Email: <input type="email" />
</label>
<br />
<br />
<label>
{" "}
Password: <input type="password" />
</label>
<br /> <br />
<label>
Gender: <input type="radio" value="male" /> Male{" "}
<input type="radio" value="female" /> Female
</label>
<br />
<br />
<button type="submit">Submit</button>
</form>
</div>
);
}
If the button is clicked, the page will reload because the button has “submit” as its type. To avoid this, we need to create a submit handler.
const submitHandler = (e) => {
e.preventDefault();
};
e.preventDefault will prevent the page from default reloading. To make it work, we need to assign this handler to the form’s onSubmit event.
<form onSubmit={submitHandler}></form>
Collecting data using state
To collect data from each input field, we have to create a state for each of them. Let’s use the useState react hook to define the states.
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [gender, setGender] = useState("");
Next, we need to set the value for every input like this.
<label>
{" "}
Name: <input type="text" value={name} />
</label>;
Similarly, the value should be defined according to the state.
Finally, we need to use the onChange event to handle the value entered by the user.
<label>
{" "}
Name:{" "}
<input type="text" value={name} onChange={(e) => setName(e.target.value)} />
</label>;
When the user enters a value in the name input field, that value is assigned to the “name” state. Similarly, an onChange event should be assigned to every input field.
The data will be submitted when the submit button is clicked. Let’s update the submit handler to display the form data in the console.
const submitHandler = (e) => {
e.preventDefault();
console.log(
`Name: ${name}\n
Email: ${email}\n
Password: ${password}\n
Gender: ${gender}`
);
};
This is how the entire component looks.
import { useState } from "react";
import "./styles.css";
export default function App() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [gender, setGender] = useState("");
const submitHandler = (e) => {
e.preventDefault();
console.log(
`Name: ${name}\nEmail: ${email}\nPassword: ${password}\nGender: ${gender}`
);
};
return (
<div className="App">
<h2> Register here! </h2>
<form onSubmit={submitHandler}>
<label>
{" "}
Name:{" "}
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<label>
{" "}
Email:{" "}
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</label>
<br />
<br />
<label>
{" "}
Password:{" "}
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</label>
<br /> <br />
<label>
<div onChange={(e) => setGender(e.target.value)}>
Gender: <input type="radio" value="male" /> Male{" "}
<input type="radio" value="female" /> Female
</div>
</label>
<br />
<br />
<button type="submit">Submit</button>
</form>
</div>
);
}
Let’s test the form by entering the values.
The form data will be displayed in the console when the submit button is clicked.
Wrapping it up
Working with the form can be complicated if the basics are not clear. But it is very important to understand the forms in React because you will definitely encounter them. Forms in React are quite similar to the forms in HTML.
The most important part is handling the input. With the introduction of React hooks, it is easy to handle the form inputs. In this article, we created a basic form in React and used the useState hook to handle the input values.
- 8 best VS Code extensions for React Developers
- 6 Ways to optimize the performance of React Application
- What is Lifting up the state means in React.js
- What are Higher-Order Components in React
- How to create custom hooks in React.js
- 5 Best React.js courses for beginners
- How to use PropType in React.js with example
- How to use Styled component in React.js with example
- What is Context API in React.js with example
- How to use Context and useReducer in state management
- What is render props in React.js with example
- useReducer example in React app
- How to create a dynamic list in React.js with example
No comments:
Post a Comment
Feel free to comment, ask questions if you have any doubt.