The add functionality

The next step is to create an add functionality for the frontend. We will implement this using the MUI modal dialog. We already went through the utilization of the MUI modal form in Chapter 9, 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 button for saving and canceling.

We have already installed the MUI component library to our frontend app in Chapter 10, Setting Up the Frontend for Our Spring Boot RESTful Web Service.

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

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

   import React from 'react';
   import Dialog from '@mui/material...