After deleting API success we are updating a few 'useState'.

(Line: 25-35) The function 'confirmDeleteHandler' contains logic to invoke the delete API call.

(Line: 15) The 'itemToDeleteId' & 'setItemToDeleteid' are useState variables used to maintain id of the record that need to be deleted.

(Line: 14) The 'showModal' & 'setShowModal' are useState variables used to show and hide the modal.

React_App/src/pages/AllSuperVillain.js: import Invoke The 'DeleteConfirmation' Component From The 'AllSuperVillain' Component:

(Line: 27-34) Confirm Delete button, click event register with arrow function which internally calls a method of parent component like 'props.ConfirmDeleteHandler'.

(Line: 19-26) Close button, click event register with arrow function which internally calls a method parent component like 'props.hideConfirmDeleteHandler'.

(Line: 17) Dynamic 'props.body' property for the modal body.

(Line: 15) Dynamic 'props.title' property for the modal title.

Here 'onHide' register with arrow function which internally calls a method of parent component like 'props.hideConfirmDeleteHandler'.

(Line: 9-10) The 'onHide' get triggered by the 'x'(close button) on the right-top corner of the modal.

So if 'show' property receives 'true' then opens up the modal.

The parent component passes its value through 'props.showModal'(here showModal is our custom property name which must be passed by the parent component and its value should be boolean).

(Line: 8) The 'show' is the boolean property of the 'Modal' component.

So this 'DeleteConfiramtion' is a shared component that can be used anywhere in our application.

Here are 'DeleteConfirmation' component contains react-bootstrap modal code.

Import Modal from 'react-bootstrap/Modal' React_App/shared/components/DeleteConfirmation.js: import Button from 'react-bootstrap/Button'

Chemdoodle web api