/  Technology   /   Resetting A form in React JS
 Resetting A form in React JS

 Resetting A form in React JS


Reseting a form in react js can be done using multiple ways like using pure javaScript methods and referencing methods etc. But the simplest method to reset a from is by using the useState hook. With the useState method we can store the state and values of input fields and onClick of reset button the entire form input fields can be cleared.

In the below example we have created a form in react js 


import React,{useState} from "react";
import "./styles.css";
export default function Form() {
  const [state, setState] = useState({ email: "", message: "" });
  function reset(e) {
    setState({ email: "", message: "" });
  return (
    <form className="Form">
      <label htmlFor="email">Email Address</label>
        onChange={(e) => {
          setState({ ...state, email: e.target.value });
      <label htmlFor="message">Message</label>
        onChange={(e) => {
          setState({ ...state, message: e.target.value });
      <button type="submit">Submit</button>
      <button onClick={reset}>Reset</button>

In this code we have created a form using the html <form> and <input> tags. Each field has its attributes declared such as id , name and value which is passed as state.input name. So the particular values entered in these fields are being stored in the state. Using the stored state data we are creating a reset button onClick of which we are calling the reset function. In this function we are clearing the stored state data. Hence it appears to be reseting the input fields provided in the form. 


.App {
  font-family: sans-serif;
  text-align: center;
.Form input,
.Form textarea {
  display: block;
  width: 15em;
  margin-top: 0.5em;
  box-sizing: border-box;
.Form label {
  display: block;
  margin-top: 1em;
.Form button {
  margin-top: 1em;
  margin-right: 1em;
.Form {
  margin: 0 auto 3em;
  display: inline-block;
  text-align: left;

These are the css styles for the input fields in the react form. 

Output :

 Resetting A form in React JS
 Resetting A form in React JS

Therefore, after clicking the reset button we have cleared the values in the input fields.


Leave a comment