I am working on Reactjs and using Nextjs, i have list of blog and i can delete any blog but i want to show message before delete that "are you sure you want to delete this item" ? How can i do this ? Here is my current code

<td>  <button type="button"  className='delete' onClick={() => handleRemove(todoList.id)}>
Delete
</button></td>

CodePudding user response：

I believe the confirm function is what you're looking for.
confirm pauses code execution and opens a popup.
It returns true or false depending on what option the user has clicked on. ("OK" or "cancel")
Execution continues once the user has chosen an option.

function handleRemove(id){
    const shouldRemove = confirm("are you sure you want to delete?")

    if (shouldRemove) {
        // Remove logic here
    }
}

CodePudding user response：

You have multiple options to do this.

1. Using confirm:

function handleRemove(id){
    const isConfirmed = confirm("re you sure you want to delete this item ?")
    if (isConfirmed) {
        // Rest of your code
    }
}

2. Using modal confirm components like Antd Modal or Material UI Modal or other libraries.

An example of Antd:

import React from 'react';
import { ExclamationCircleFilled } from '@ant-design/icons';
import { Button, Modal, Space } from 'antd';

const { confirm } = Modal;

const showConfirm = () => {
  confirm({
    title: 'Are you sure you want to delete this item ?',
    icon: <ExclamationCircleFilled />,
    content: 'Some descriptions',
    onOk() {
      // Your Delete Logic
    },
    onCancel() {
      // Do nothing
    },
  });
};

const ConfirmModal = () => (
  <Space wrap>
    <Button onClick={showConfirm}>Confirm</Button>
  </Space>
);

export default ConfirmModal;

3. Write the modal code yourself (which is not recommended).