Clear Input values after form submit in React

Clear Input values after form submit in React #

To clear input values after form submit in React:

Store the values of the input fields in state variables.
Set the onSubmit prop on the form element.
When the submit button is clicked, set the state variables to empty strings.

clear input values after form submit

App.js

Copied!
import {useState} from 'react';

const App = () => {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');

  const handleSubmit = event => {
    console.log('handleSubmit ran');
    event.preventDefault(); // 👈️ prevent page refresh

    // 👇️ clear all input values in the form
    setFirstName('');
    setLastName('');
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          id="first_name"
          name="first_name"
          type="text"
          onChange={event => setFirstName(event.target.value)}
          value={firstName}
        />
        <input
          id="last_name"
          name="last_name"
          type="text"
          value={lastName}
          onChange={event => setLastName(event.target.value)}
        />

        <button type="submit">Submit form</button>
      </form>
    </div>
  );
};

export default App;

The button element in the form has type of submit, so every time it is clicked the submit event is fired on the form.

We used the event.preventDefault() method in the handleSubmit function to prevent the page from refreshing when the form is submitted.

To clear the input values after the form has been submitted, we simply set the state variables to empty strings.

Alternatively, you can set each variable back to its initial state value.

If you work with uncontrolled input fields and track their values with the useRef hook, you can use the reset() method to clear the form's input values.

App.js

Copied!
import {useRef} from 'react';

const App = () => {
  const firstRef = useRef(null);
  const lastRef = useRef(null);

  const handleSubmit = event => {
    console.log('handleSubmit ran');
    event.preventDefault();

    // 👇️ clear all input values in the form
    event.target.reset();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          ref={firstRef}
          id="first_name"
          name="first_name"
          type="text"
        />
        <input
          ref={lastRef}
          id="last_name"
          name="last_name"
          type="text"
        />

        <button type="submit">Submit form</button>
      </form>
    </div>
  );
};

export default App;

The reset() method restores a form element's default values.

Regardless of how many uncontrolled input fields your form has, a single call to the reset() method clears all of them.

Alternatively, you can clear the values by setting the value property of each ref to an empty string.

App.js

Copied!
import {useRef} from 'react';

const App = () => {
  const firstRef = useRef(null);
  const lastRef = useRef(null);

  const handleSubmit = event => {
    console.log('handleSubmit ran');
    event.preventDefault();

    // 👇️ clear all input values in the form
    firstRef.current.value = '';
    lastRef.current.value = '';
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input ref={firstRef} id="first_name" name="first_name" type="text" />
        <input ref={lastRef} id="last_name" name="last_name" type="text" />

        <button type="submit">Submit form</button>
      </form>
    </div>
  );
};

export default App;

This code snippet achieves the same result, but instead of using the reset() method on the form we manually clear the value of each input field.

Clear Input values after form submit in React

Clear Input values after form submit in React #

Borislav Hadzhiev