Categories
React Answers

How to get data from the Material UI TextField component?

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.