Warning: session_start(): open(/tmp/sess_01a146fadcfebb8d5e0693a4663895ee, O_RDWR) failed: Disk quota exceeded (122) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: session_start(): Failed to read session data: files (path: /tmp) in /home/wvyrfnwn/learnshareit.com/wp-content/plugins/learnpress/inc/class-lp-page-controller.php on line 1007

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 719

Warning: ftp_mkdir() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 562

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/wvyrfnwn/learnshareit.com/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
How To Clear An Input Field's Value In React.js - LearnShareIT

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

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:

Animated GIF - Find & Share on GIPHY

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:

Animated GIF - Find & Share on GIPHY

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:

Animated GIF - Find & Share on GIPHY

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:

Leave a Reply

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