Adding the add functionality

The next step is to add an add functionality to the frontend. We will implement this using the MUI modal dialog.

We went through the MUI modal form in Chapter 11, Useful Third-Party Components for React.

We will add the New Car button to the user interface, which opens the modal form when it is pressed. The modal form contains all the fields that are required to add a new car, as well as the buttons for saving and canceling.

The following steps show you how to create the add functionality using the modal dialog component:

1. Create a new file called AddCar.tsx in the components folder and write some functional component base code to the file, as shown here. Add the imports for the MUI Dialog component:

   import Dialog from '@mui/material/Dialog';
   import DialogActions from '@mui/material/DialogActions';
   import DialogContent from '@mui/material/DialogContent';
   import DialogTitle from &apos...