Resetting A form in React JS

October 18, 2022

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

form.jsx

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

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.

Styles.css

.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;
}