Trigger bootstrap 5 modal confirmation in React - reactjs

Question

I have this delete button here where in when you click this it suppose to show the bootstrap confirmation modal that looks like this:
So I have this button here along with the html code for the modal:
<button classNameName="btn btn-sm" data-bs-toggle="modal" data-bs-target="#deleteResortOwner" onClick={() => deleteHandler(resort._id)}>
DELETE
</button>
<div className="modal fade" id="deleteResortOwner" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="deleteResortOwnerLabel" aria-hidden="true">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="deleteResortOwnerLabel">Modal title</h5>
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div className="modal-body">
<p>Are you sure you want to delete this resort?</p>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Not Sure</button>
<button type="button" className="btn btn-primary">Yes</button>
</div>
</div>
</div>
</div>
Now on my onClick effect that will call the deleteHandler method:
const deleteHandler = (id) => {
dispatch(deleteResortOwner(id))
}
This will of course delete the item directly without showing a confirmation modal. I used to do this like this which is a basic alert:
const deleteHandler = (id) => {
if(window.confirm('Are you sure')){
dispatch(deleteResort(id))
}
}
But I need this to run like a modal not an alert. Wondering how can I attain this and still open the modal to do the confirmation instead of the window.confirm? This will also must delete the item if the "Yes" button on the modal was click and will simply close the modal when "Close" button was click.
Any idea how to do this? Please help.

Answer 1

Use react-modal NPM package and then add styles using bootstrap.
And check it's docs for more details.