Skip to content

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

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>
  );
}

See also  Loop inside React JSX

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.