How To Clear An Input Field’s Value In React.js

Clear an input field’s value in React.js is very helpful. It will help you to custom your input element. To do it, you can use the useState hook or useRef hook. So what are the specific steps? Stay tuned in this post.

Clear an Input field’s value in React.js

Method 1: Use the useState hook

You can use useState to store data and reset its value.

Example:

import { useState } from 'react';
import './App.css';
 
function App() {
    const [value, setValue] = useState('');
    const handleClear = (e) => {
    	setValue('');
	}; 
    const handleInput = (e) => {
      	setValue(e.target.value);
    };
    
    return (
        <div className="App">
            <input type={'text'} value={value} onChange={handleInput}></input>
            <button onClick={handleClear}>Clear Value</button>
        </div>
    );
}
 
export default App;

Output:

Here I create a useState and a function called handleInput. So every time I change the input value, that value will be set to useState value and that useState value will be set to the value of the input.

Method 2: Use useRef hook

useRef hook will help you to get your DOM element in React.js by creating a reference. It has a property called current that contains the value.

Example:

import { useRef } from 'react';
import './App.css';
 
function App() {
    const inputEle = useRef();
    const handleClear = (e) => {
      	inputEle.current.value = '';
    };
  
    console.log(inputEle);
  
    return (
        <div className="App">
            <input ref={inputEle} type={'text'} onChange={handleInput}></input>
            <button onClick={handleClear}>Clear Value</button>
        </div>
    );
}
 
export default App;

Output:

Here I assign the <input> element to the inputEle variable, so inputEle also means <input> element. Then, I can get and config input value through the value property and reassign it to an empty string.

Method 3: Use reset() method

The reset() method reset your form to the default value, an empty string. But you will have to use it within a <form> element with the type of button is ‘submit’. So every time you click ‘submit’, your form will reset. You can use this example.

Example:

import './App.css';
 
function App() {
    const handleClear = (e) => {
      	// This code stops your form from default behaviour to reset your page
        e.preventDefault();
        e.target.reset();
    };

    return (
        <div className="App">
            <form onSubmit={handleClear}>
                <input type={'text'}></input>
                <button type='submit'>Submit</button>
            </form>
        </div>
    );
}
 
export default App;

Output:

Summary

In this tutorial, I have explained to you how to clear an input field’s value in React.js. You can use the useState or useRef hook to add an event every time you click on the button will reassign your input value. Or you can use the reset() method to reset your form every time you click on submit. Thanks for reading!

Maybe you are interested:

• Clear a timeout or an interval in React with hooks
• Get the Height of an Element using a Ref in React
• get window width and height in react
• Submit a form using the Enter key in React.js
• How to submit a form using the Enter key in React.js?

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm