Clear an Input field's value in React.js

Clear an Input field's value in React.js #

To clear an input field's value in React:

Store the input's value in a state variable.
When a certain event occurs, set the state variable to an empty string.
For uncontrolled components, set the ref's value to an empty string, e.g. ref.current.value = '';.

react clear input value

App.js

Copied!
import {useState} from 'react';

const App = () => {
  // 👇️ store input's value in state
  const [message, setMessage] = useState('');

  const handleChange = event => {
    setMessage(event.target.value);
  };

  const handleClick = () => {
    // 👇️ clear input value
    setMessage('');
  };

  return (
    <div>
      <input
        id="message"
        name="message"
        type="text"
        onChange={handleChange}
        value={message}
      />

      <button onClick={handleClick}>Clear field</button>
    </div>
  );
};

export default App;

We used the useState hook to store the value of the input field in a state variable.

To clear the input's value, we have to set the message state variable to an empty string.

The handleClick function we passed to the onClick prop of the button element gets called every time the button is clicked.

The button could be your form's submit button or a simple button that triggers an event.

This approach can be used to reset the value of as many input fields as necessary.

If you use uncontrolled components with the useRef hook, set the ref's value to an empty string.

App.js

Copied!
import {useRef} from 'react';

const App = () => {
  const ref = useRef(null);

  const handleClick = () => {
    // 👇️ clear input field value
    ref.current.value = '';
  };

  return (
    <div>
      <input ref={ref} id="message" name="message" type="text" />

      <button onClick={handleClick}>Clear field</button>
    </div>
  );
};

This code sample achieves the same result but for uncontrolled components.

The useRef() hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

Notice that we have to access the current property on the ref object to get access to the input element on which we set the ref prop.

When we pass a ref prop to an element, e.g. <input ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

This approach can be used to clear the value of as many uncontrolled input fields as necessary.

Alternatively, when working with uncontrolled input fields, you can also use the reset() method to clear the values of all input fields in the form.

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;

clear multiple input fields

Note that this approach wouldn't work for controlled components where we store the values of the input fields in the state.

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

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.

Clear an Input field's value in React.js

Clear an Input field's value in React.js #

Borislav Hadzhiev