How to clear the Material UI text field Value in React?

Subash Chandran 25th January 2022 Leave a Comment

To clear the Material UI text field Value in React, we can set the value property of the input to an empty string.

textInput.current.value = ""

Example

import React from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";

export default function App() {
  const textInput = React.useRef(null);

  return (
    <div>
      <Button
        onClick={() => {
          textInput.current.value = "";
        }}
      >
        clear
      </Button>
      <TextField
        fullWidth
        required
        inputRef={textInput}
        name="firstName"
        type="text"
        placeholder="Enter Your First Name"
        label="First Name"
      />
    </div>
  );
}