How to create a confirmation delete popup in React?

Question

I am creating a Todo App, and trying to create a confirmation delete popup which is going to be visible when the user wants to delete a todo.

In my todo.js component I have created an onClick callback, handleDelete, in my delete button, that callback will set the popup to true making it visible, the problem is that in my handleDelete I pass the Id as argument, so I can track which todo has been clicked and filter it to show the new data updating the todos state, but I only want to do update the data when the user have clicked in the confirm button that is in the popup.

App Component:

function App() {
  const [inputValue, setInputValue] = useState("");
  const [todos, setToDos] = useState([]);
  const [noToDo, setNoToDo] = useState(false);
  const [popup, setPopup] = useState(false);

  const handleOnSubmit = (e) => {
    e.preventDefault();

    setNoToDo(false);
    const ide = nanoid();
    const date = new Date().toISOString().slice(0, 10);
    const newToDo = { task: inputValue, id: ide, date: date };
    setToDos([...todos, newToDo]);
    setInputValue("");
  };

  const handleDelete = (id) => {
    setPopup(true);

    let filteredData = todos.filter((todo) => todo.id !== id);

    {
      /*
    filteredData is the new data, but I only want to update 
    todos with filteredData when the user has clicked on the confirm
    button in the modal component, which execute(handleDeleteTrue)*/
    }
  };

  const handleDeleteTrue = () => {
    setPopup(false);
    setToDos(filteredData);
  };

  const handleEdit = (id, task) => {
    setInputValue(task);
    const EditedData = todos.filter((edited) => edited.id !== id);
    setToDos(EditedData);
  };

  return (
    <div className="App">
      <div className="app_one">
        <h1>To do app</h1>
        <form action="" className="form" onSubmit={handleOnSubmit}>
          <input
            type="text"
            placeholder="Go to the park..."
            onChange={(e) => setInputValue(e.target.value)}
            value={inputValue}
          />
          <button type="submit">ADD TO DO</button>
        </form>
      </div>
      {noToDo && <FirstLoad />}
      {todos.map((todo) => {
        return (
          <div key={todo.id} className="result">
            <Todo
              {...todo}
              handleDelete={handleDelete}
              handleEdit={handleEdit}
            />
          </div>
        );
      })}
      {popup && <Popup handleDeleteTrue={handleDeleteTrue} />}
    </div>
  );
}

export default App;

Todo Component:

const Todo = ({ handleDelete, handleEdit, task, id, date }) => {
  return (
    <>
      <div className="result_text">
        <h3>{task}</h3>
        <p className="result_textP">{date}</p>
      </div>
      <div>
        <button onClick={() => handleEdit(id, task)} className="button green">
          Edit
        </button>
        <button onClick={() => handleDelete(id)} className="button">
          delete
        </button>
      </div>
    </>
  );
};

export default Todo;

Modal Component:

function Popup({ handleDeleteTrue }) {
  return (
    <div className="modal">
      <div className="modal_box">
        <p>You sure you wanna delete?</p>
        <button className="modal_buttonCancel">Cancel</button>
        <button onClick={handleDeleteTrue} className="modal_buttoDelete">
          Confirm
        </button>
      </div>
    </div>
  );
}

export default Popup;

I tried to declare filteredData as global variable, outside my App component, so when I execute handleDelete it initializes that variable with the filtered data, and only when the user click the confirm button on the popup it executes a new function, handleDeleteTrue, which updates the data to filteredData.

It works, but declaring variables outside my component is not a good practice, so is there a better approach?

Answer 1

The issue in your current code is that, you are losing the id that should be deleted, so you need to store it in a ref or state.

Here is a solution that stores the id in state along with the boolean flag that shows/hides the Confirmation Box:

const [popup, setPopup] = useState({
  show: false, // initial values set to false and null
  id: null,
});

Modify the delete-handlers as:

// This will show the Cofirmation Box

const handleDelete = (id) => {
  setPopup({
    show: true,
    id,
  });
};

// This will perform the deletion and hide the Confirmation Box

const handleDeleteTrue = () => {
  if (popup.show && popup.id) {
    let filteredData = todos.filter((todo) => todo.id !== popup.id);
    setToDos(filteredData);
    setPopup({
      show: false,
      id: null,
    });
  }
};

// This will just hide the Confirmation Box when user clicks "No"/"Cancel"

const handleDeleteFalse = () => {
  setPopup({
    show: false,
    id: null,
  });
};

And, in the JSX, pass the handlers to Popup:

{popup.show && (
  <Popup
    handleDeleteTrue={handleDeleteTrue}
    handleDeleteFalse={handleDeleteFalse}
  />
)}