How to Clear Textbox in React JS

In this article, we are going to learn “How to Clear Textbox in React JS”. Clearing text box is pretty easy to do, also it will be good to have in our React application. We can perform this operation in multiple ways, and we will see all of these ways to clear out a text box or input field.

Basically, we are going to see three methods to clear textbox in React JS:

• Using State
• Using Ref
• Clearing Form Inputs

How to Clear Textbox in React JS Using State

Simplest way to clear out input field by using state, here we have simply added a state named message with initial blank string. Then we have added an input field where we have assigned our message state as value of the input, and we have called a function named handleChange() when the input field gets changed, in this function we are just updating our message state with the entered value. Then we have added a button with function call named handleClick(), in this function we have updated our input with blank string.

So after entering value in input field then if we click on the button then handleClick() will be called and as we updated the message of the value which alternatively change value of input field. To clear the input’s value, we have to set the message state variable to an empty string.

import React, { useState } from 'react';

const App = () => {
  const [message, setMessage] = useState('');

  return (
    <div>
      <input
        id="message"
        name="message"
        type="text"
        onChange={(event) => setMessage(event.target.value)}
        value={message}
      />

      <button onClick={() => setMessage('')}>Clear</button>
    </div>
  );
};

export default App;

Output:

How to Clear Textbox in React JS Using Ref

We can do this same thing using useRef hook, as we know about above code was for controlled component, but useRef will achieve your same result for uncontrolled components. Ref hooks can be passed an initial value as an argument, where the hook returns a ref object whose .current property is initially passed as an argument.

So what we have to do is, just to get access of current property by which we can change data to empty string. For that, we have just added an input field where we passed ref as our useRef hook refs. So that changes can be performed using this “refs”. Then we added a button with handleClick() function call on click event, In this function we used ref.current.value = ''; to manipulate the value to blank string.

import {useRef} from 'react';

const App = () => {
  const refs = useRef('');

  const handleClick = () => {
    ref.current.value = '';
  };

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

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