React Material-UI Cookbook

How to do it...

Just like any other text input element, you need to provide the TextField component with an onChange event handler that updates the state for the input. Without this handler, the value of the input won't change as the user types. Let's look at an example where three text fields are rendered and they're each controlled by their own piece of state:

import React, { useState } from 'react';import { makeStyles } from '@material-ui/styles';import TextField from '@material-ui/core/TextField';import Grid from '@material-ui/core/Grid';const useStyles = makeStyles(theme => ({  container: { margin: theme.spacing.unit * 2 }}));export default function ControllingInputWithState() {  const classes = useStyles(); const [first, setFirst] = useState(''); ...