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

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

How to get data from the React Material UI TextField component?

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

In the function, we can get the input value from the e.target.value property and set that as the value of a state.

For instance, we write:

import { TextField } from "material-ui";
import React, { useState } from "react";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";

export default function App() {
  const [value, setValue] = useState("");

  return (
    <MuiThemeProvider>
      <div>
        <TextField
          value={value}
          onChange={(e) => {
            setValue(e.target.value);
          }}
        />
      </div>
    </MuiThemeProvider>
  );
}

We set onChange to a function that calls setValue with e.target.value to set the value state to the input value.

Then we set the value prop of the TextField to the value state show the input value in the text field.

Conclusion

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

In the function, we can get the input value from the e.target.value property and set that as the value of a state.