How to get data from the Material UI TextField component?

Sometimes, we want to get data from the Material UI TextField component.

In this article, we’ll look at how to get data from the Material UI TextField component.

How to get data from the Material UI TextField component?

To get data from the Material UI TextField component, we can get the input value from the onChange callback.

For instance, we write

import React from "react";
import { useState } from "react";

import TextField from "@material-ui/core/TextField";

const Input = () => {
  const [textInput, setTextInput] = useState("");

  const handleTextInputChange = (event) => {
    setTextInput(event.target.value);
  };

  return (
    <TextField
      label="Text Input"
      value={textInput}
      onChange={handleTextInputChange}
    />
  );
};

export default Input;

to add a TextField with the onChange prop set to the handleTextInputChange function.

In it, we call setTextInput with the event.target.value property which has the input value.

Then we get the input value from the textInput state, which we set as the value of the value prop.

Conclusion

To get data from the Material UI TextField component, we can get the input value from the onChange callback.