The edit functionality
We will implement the edit
functionality by adding the Edit button to each table row. When the row Edit button is pressed, it opens the modal form, where the user can edit the existing car and finally save the changes:
- First, we will create a skeleton of the
EditCar
component, which will be the form for editing an existing car. Create a new file calledEditCar.js
in thecomponents
folder. TheEditCar
component code is similar to theAddCar
component, but for now, in thehandleSave
function, we should call theupdate
function that we will implement later:import React, { useState } from 'react'; import Dialog from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogTitle from '@mui/material/DialogTitle'; function EditCar(props) { const [open, setOpen] = useState(false); const [car, setCar...