Using the TextField components

In this section, we'll change the text input in the modal form using the Material-UI TextField component. Add the following import statement to the AddCar.js and EditCar.js files:

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

Then, change the input to the TextField components in the add and edit forms. We are using the label props to set the labels of the TextField components. The first TextField component contains autoFocus props, and the input will be focused on this field:

return (
  <div>
    <Button variant="outlined" color="primary" style={{margin: 10}} onClick={handleClickOpen}>
      New Car
    </Button>
    <Dialog open={open} onClose={handleClose}>
       <DialogTitle>New car</DialogTitle>
       <DialogContent>
         <TextField autoFocus fullWidth label...