Using the TextField components
In this section, we'll change the text inputs in the modal forms using the MUI TextField
and Stack
components:
- Add the following import statement to the
AddCar.js
andEditCar.js
files:import TextField from '@mui/material/TextField'; import Stack from '@mui/material/Stack';
- Then, change the input elements to the
TextField
components in the add and edit forms. We are using thelabel
prop to set the labels of theTextField
components. The firstTextField
component contains theautoFocus
prop, and the input will be focused on this field. There are three different variants available, and we are using thestandard
one.
The text fields are wrapped inside the Stack
component to get spacing between the components and to set the top margin:
// AddCar.js, do the same modifications to the EditCar.js file return( <div> <Button variant="contained...