The EditShop component will show a form similar to the create new shop form, pre-populated with the existing shop details. This component will also show a list of the products in this shop, to be discussed in the Products section. The completed Edit Shop view is pictured in the following screenshot:

The form part of this view for editing shop details is similar to the form in the NewShop component, with the same form fields and a formData object that holds the multipart form data to be sent with the update fetch method. In contrast to the NewShop component, in this component, we will need to utilize the read shop API to fetch the given shop's details in an useEffect hook and pre-populate the form fields. You can combine the implementations discussed for the NewShop component and Shop component to complete the EditShop component.

The EditShop component will only be accessible by authorized shop owners. So we will add a PrivateRoute in the MainRouter component as shown next, which will render this component only for authenticated users at /seller/shop/edit/:shopId:

mern-marketplace/client/MainRouter.js:

<PrivateRoute path="/seller/shop/edit/:shopId" component={EditShop}/>

This link is added with an edit icon for each shop in the MyShops component, allowing a seller to access the edit page for each of their shops. In the MyShops view, sellers are also able to delete their shops, as implemented in the next section.