React input field with clear button example
July 06, 2022Hi Friends 👋,
Welcome To aGuideHub! ❤️
To clear an input field with React, we can set the value an empty button string.
Today, I am going to show you. how to input field with clear button in react js with code example.
Let’s look at the following example to understand how it basically works:
App.js
import React, { useState } from "react";
export default function App() {
const [val, setVal] = useState();
return (
<div>
<input type="text" value={val} />
<button onClick={() => setVal(() => "")}>Reset</button>
</div>
);
}
Step to Run Application: Run the application using the following command
from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/,
you will see the following output:
Check the output of the above code example.
All the best 👍