Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

How to Clear Textbox in React JS

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
image source: https://bobbyhadz.com/

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 {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;

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(null);

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

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

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

How to Clear Textbox in React JS From Form Inputs

Now let’s see how we can clear out uncontrolled form inputs, here we have again used useRef with initial null values. So if you want to convert this form to controlled form then you should use states which will be essential instead of refs.

Now let’s see what we have done here, we have created a simple form with two input fields, with ref values which we have defined earlier. Now we have added a submit button where we are calling a function named handleSubmit(), in which we used event.target.reset() the method to clear out our form.

Reset method is core method to clear form because it restores the values back, ultimately it will restore null values here.

Here you can see we used event.preventDefault() method, so if we submit the form then the page won’t reload.

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;
How to Clear Textbox in React JS
image source: https://bobbyhadz.com/
Default image
reactjsguru
Articles: 60

Leave a Reply

Your email address will not be published. Required fields are marked *