How can I not delete the client when I open the modal? - reactjs

Question

When a user deletes a client, I have created a modal that asks the user(Are you sure you want to delete it).
The problem is as soon as the modal is open, the client is deleted, even though the user has not clicked yes to confirm the delete.
ClientList.js
export default function ListClients() {
const [showModal, setShowModal] = useState();
const [userlist, setUserlist] = useState([]);
function deleteClient() {
const userParams = {
clientName:
clientName,
country: country,
clientid: selectedID,
};
axios
.delete(process.env + "client", {
data: clientParams,
})
.then((response) => {
setClientlist(clientlist.filter((client) => client.id !== clientId));
})
.catch((error) => {
console.log(error);
});
// const openModal = () => {
// setShowModal(prev => !prev);
// };
}
return(
<div>
<tbody>
{userlist.length > 0 ? (
userlist.map((userlist) => (
<tr key={userlist.id}>
<td>
<div">
{userlist.id}
</div>
</td>
<td>
<button type="button" onClick={() => {deleteClient(clientlist.id); setShowModal(true)}}>
Delete
</button>
</td
</tr>
</tbody>
//the idea is to pass the state for modal to show
<ModalDelete showModal={showModal} setShowModal={setShowModal} onDel={() => deleteClient(clientlist.id)}/>
</div>
);
ModalDelete.js
export default function ModalDelete({ showModal, setShowModal,onDel }) {
return(
<div>
{ showModal ? <Transition.Root show={showModal}>
<div>
<p> Are you sure you want to delete the client?</p>
</div>
<div>
<button type="button" onClick={() => {onDel(); setShowModal(false);}>Yes</button>
<button type="button" onClick={() => {setShowModal(false);}} >
Go Back
</button>
</div>
</Transition.Root> : null }
</div>
);
}
When the user clicks yes in the modal, I want the client to be deleted.
How can I make it?

Answer 1

You are calling the deleteClient function in the event handler assigned to the delete button, before setting showModal to true. This causes the client to be deleted first and the modal to be displayed afterwards.
To fix this, you should update the event handler to not call deleteClient. Instead, define a function in the ListClient component which will close the modal and call the deleteClient function. Pass this as the onDel prop to your ModalDelete component.
(Edit: Fixed grammar)