React input field with clear button example

Hi 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 👍