Passing function to modal in ReactJs - reactjs

Question

In an application in ReactJs, I am trying to use a modal to confirm the deletion of a user. Normally I have a delete function created in the users table that deletes a user from my database. Now I would like to pass this functionality to the modal. I am wondering how I can easily pass the delete function to the modal. That when I confirm the delete action in modal a user is deleted. I would be grateful for any guidance.
MyModal.js
import React from "react";
export default function MyModal() {
const [showModal, setShowModal] = React.useState(false);
return (
<>
<button
className="bg-red-600 text-white active:bg-pink-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={() => setShowModal(true)}
>
Delete
</button>
{showModal ? (
<>
<div className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
<div className="relative w-auto my-6 mx-auto max-w-3xl">
{/*content*/}
<div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
{/*header*/}
<div className="flex items-start justify-between p-5 border-b border-solid border-slate-200 rounded-t">
<h3 className="text-3xl font-semibold">Modal Title</h3>
<button
className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
onClick={() => setShowModal(false)}
>
<span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
×
</span>
</button>
</div>
{/*body*/}
<div className="relative p-6 flex-auto">
<p className="my-4 text-slate-500 text-lg leading-relaxed">
Are you sure you want to delete this user?
</p>
</div>
{/*footer*/}
<div className="flex items-center justify-end p-6 border-t border-solid border-slate-200 rounded-b">
<button
className="text-blue-600 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={() => setShowModal(false)}
>
Close
</button>
<button
className="bg-red-600 text-white active:bg-emerald-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
type="button"
onClick={() => setShowModal(false)}
>
Delete
</button>
</div>
</div>
</div>
</div>
<div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
</>
) : null}
</>
);
}
ManageUser.js
import { useEffect, useState } from "react";
import { useAuthContext } from "../hooks/useAuthContext";
import MyModal from "../components/MyModal"
import LoadingSpinner from "../components/LoadingSpinner";
function ManageUser() {
const [users, setUser] = useState([]);
const [loading, setLoading] = useState(false)
useEffect(() => {
getData();
}, []);
async function deleteOperation(_id) {
let result = await fetch(`/api/user/${_id}`, {
method: "DELETE",
});
result = await result.json();
console.warn(result);
getData();
}
async function getData() {
setLoading(true)
let result = await fetch("/api/user/users");
result = await result.json();
setUser(result);
setLoading(false)
}
return (
<div>
<h1 className="flex justify-center py-4 text-xl font-bold">Zarządzaj użytkownikami:</h1>
<div className="flex justify-center py-2">
<div className="flex justify-between items-center h-30 max-w-[1240px] mx-auto px-4">
{ loading ? (<div className="flex justify-center items-center "><LoadingSpinner/></div>) :
<div className=" overflow-x-auto relative shadow-md sm:rounded-lg">
<table className="w-full text-sm text-center text-white">
<thead className="text-xs text-white uppercase bg-rgba(6, 18, 36, 0.945)">
<tr>
<th scope="col" className="py-3 px-6">
Nazwa
</th>
<th scope="col" className="py-3 px-6 hidden sm:table-cell">
Email
</th>
<th scope="col" className="py-3 px-6">
Admin
</th>
<th scope="col" className="py-3 px-6">
</th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user._id} user={user} className="bg-rgba(6, 18, 36, 0.945) border-b border-[#00df9a] ">
<th scope="row" className="py-4 px-6 font-medium text-white whitespace-nowrap">
{user.name}
</th>
<td className="py-4 px-6 hidden sm:table-cell">
{user.email}
</td>
<td className="py-4 px-6">
{user.isAdmin ? "Tak" : "Nie"}
</td>
<td className="py-4 px-6 text-right">
<MyModal/><button className="bg-red-500 hover:bg-[#00df9a] text-white font-semibold py-2 px-4 border border-zinc-900 rounded shadow" onClick={() => deleteOperation(user._id)}>Delete</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
}
</div>
</div>
</div>
);
}
export default ManageUser;
Is there any quick way to pass the function that I use for deleting a user to this modal?

Answer 1

You could just pass a property to your model component, lets call it onSubmit
export default function MyModal( { onSubmit } ) {
Within your modal you can handle the submitting with a submitHandler like
const submitHandler = () => {
setShowModal(false);
onSubmit();
}
Your delete button in the MyModal can call this submitHandler like
<button onClick={submitHandler}>
Delete
</button>
and within your ManageUser component you could pass the deleteOperation as the onSubmit function like
<MyModal onSubmit={() => deleteOperation(user.id)}/>