Borislav Hadzhiev
Sat Apr 16 2022·2 min read
Photo by Andi Rizal
To clear an input field's value in React:
ref.current.value = '';
.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.
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.
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.
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.
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.
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;
Note that this approach wouldn't work for controlled components where we store the values of the input fields in the state.
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.