Clear an Input Field With Reactjs

Clear input field using React hooks

You're using an uncontrolled input. Try setting value={message} on the input.

How to clear input field after clicking submit in react js redux

Try this way:

clearInput = () => {
const reminder = { ...this.state.reminder, title: '' };
this.setState({ reminder });

handleSubmit = (e) => {

Clear input field reset back to defaultValue (0)

I am assuming you are using Material UI's TextField component. As stated in the documentation, default value is only displayed when your component is uncontrolled. Here you have a controlled component.

What you can do is providing onChange a function check whether is empty ("") or not, so you can set your variable to 0 or

handleChange = (e) => {
if ( === "" && mynumber !== 0) {
} else {

clear text-field after submit in react

x clear icon appears only when the input has value - react

You can conditional render the icon based on the value of the input field. Maintain a state for the value using the useState hook. onChange will trigger everytime you enter a value into the input field and set the state.

export default function Search() {
const inputElt = useRef(null);
const [value,setValue] = useState('')

return (
<form className='flex'>
className='flex-grow focus:outline-none cursor-pointer'
onChange={(e) =>setValue(}
{value && <XIcon className='h-5' />}

Related Topics

Leave a reply