Passing function to modal in 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 (
    <>
      
      {showModal ? (
        <>
          
            
              {/*content*/}
              
                {/*header*/}
                
                  Modal Title
                  
                
                {/*body*/}
                
                  
                    Are you sure you want to delete this user?
                  
                
                {/*footer*/}
                
                  
                  
                
              
            
          
          
        
      ) : 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 (
    
      Zarządzaj użytkownikami:
      
      
        { loading ? () : 
          
              
                  {users.map((user) => (
                      
                      
                      ))}
                  
                  
                      
                          
                              Nazwa
                          
                          
                              Email
                          
                          
                              Admin
                          
                          
                          
                      
                  
                  
                          
                          {user.name}
                          
                          
                          {user.email}
                          
                          
                          {user.isAdmin ? "Tak" : "Nie"}
                          
                          
                          
                          
                      
              
          
        }   
      
      
      
    
  );
}

export default ManageUser;

Is there any quick way to pass the function that I use for deleting a user to this modal?

Xiduzo · Accepted Answer

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

and within your ManageUser component you could pass the deleteOperation as the onSubmit function like

 deleteOperation(user.id)}/>

Passing function to modal in ReactJs

Answers (1)

Related Questions