Why the function I pass to another component is undefined? - reactjs

Question

What I'm trying to do is to show a modal(which asks if you want to delete the client, yes or no) when the user deletes a client, and to do that I have passed the function as props to the modal component, when the user clicks yes, the delete function is triggered.
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);
});
}
return(
<div>
<tbody>
{userlist.length > 0 ? (
userlist.map((userlist) => (
<tr key={userlist.id}>
<td>
<div">
{userlist.id}
</div>
</td>
<td>
<button type="button" onClick= {() =>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
Modal.js
export default function ModalDelete({ showModal, setShowModal,onDel }) {
console.log(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>
);
}
So when I console log the onDel in my console it shows that is undefined. Which means nothing is passed.
Is there a way how to pass the function?

Answer 1

I believe there is no issue from React side but after looking to code seems broken for the delete function, as i can see you are sending a param clientlist.id while calling the onDel, hence your deleteClient function must pass all criteria required so that it should not return undefind. try to fix this code may be your issue will get resolved, one more thing while opening the delete modal you must store this clientListId to a new state so that same can be accessed from the local state, because there is no method defind to store current clicked item from user list