How To Reset a React-Bootstrap Form After Submit?

Forms are one of the most useful elements in web applications. It allows users to input their credentials and submit those data. There are many types of forms present (User Registration, Login, Feedback Form etc).

In this article, we will see how to reset a React-Bootstrap Form after submission.

Prerequisites

• JavaScript
• React-Bootstrap
• React Basics
• React Hooks

Approach to reset a React-Bootstrap Form after submit

• At first, we need to store the form data in the "formData" state object (name, email, password). It can help to track input values and update them.
• There is a function named "handleChange()" which is used to change the form inputs. It updates the corresponding field in the "formData" object in real time.
• There is another function named "handleSubmit()" where you need to specify "e.preventDefault()" for default behaviour. This function validates whether all form fields are filled or not. If not, it shows an alert. If all fields are filled, the form displays a success message and resets.

Steps to Reset a React-Bootstrap Form after submit:

Step 1: Create the React application using the following command.

npx create-react-app react-bootstrap-form
cd react-bootstrap-form

Step 2: Then install the react-bootstrap using the following command.

npm install react-bootstrap bootstrap

Step 3: Add Bootstrap CSS in index.js to style the components.

import 'bootstrap/dist/css/bootstrap.min.css';

Folder Structure

Dependencies

"dependencies": {
 "@testing-library/jest-dom": "^5.17.0",
 "@testing-library/react": "^13.4.0",
 "@testing-library/user-event": "^13.5.0",
 "bootstrap": "^5.3.3",
 "react": "^18.3.1",
 "react-bootstrap": "^2.10.4",
 "react-dom": "^18.3.1",
 "react-scripts": "5.0.1",
 "web-vitals": "^2.1.4"
 },

Example: Create the required files and add the given codes.

To start the application run the following command

npm start

Output