I'm currently working on two files: Modal.js and Users.js. Users.js features a table with an API get query linked to it, and in the last column of the table, there's a dropdown for each row that contains three buttons: View, Edit, and Delete. My goal is to have the Delete button trigger a Modal with a confirmation message saying "Are you sure you wish to delete the user?".
I've been facing challenges trying to make the Modal appear upon clicking the Delete component in the Users.js file. I will provide the code for both files below.
Modal.js (The content within the modal has not been modified yet)
import {
CButton,
CModal,
CModalHeader,
CModalTitle,
CModalBody,
CModalFooter,
} from "@coreui/react";
const Modal = ({ visible, setVisible }) => {
return (
<>
<CModal visible={visible} onClose={() => setVisible(false)}>
<CModalHeader onClose={() => setVisible(false)}>
<CModalTitle>Modal title</CModalTitle>
</CModalHeader>
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
<CModalFooter>
<CButton color="secondary" onClick={() => setVisible(false)}>
Close
</CButton>
<CButton color="primary">Save changes</CButton>
</CModalFooter>
</CModal>
</>
);
};
export default Modal;Users.js
<CTableRow v-for="item in tableItems" key={rows.userID}>
<CTableDataCell className="text-center">{rows.userID}</CTableDataCell>
<CTableDataCell>{rows.firstName}</CTableDataCell>
<CTableDataCell>
<div>{rows.lastName}</div>
</CTableDataCell>
<CTableDataCell className="column-overflow">{rows.email}</CTableDataCell>
<CTableDataCell>{rows.role}</CTableDataCell>
<CTableDataCell>{rows.createdAt}</CTableDataCell>
<CTableDataCell>{rows.updatedAt}</CTableDataCell>
<CTableDataCell>
<strong>{rows.lastLogin}</strong>
</CTableDataCell>
<CTableDataCell>
<CDropdown>
<CDropdownToggle color="transparent"></CDropdownToggle>
<CDropdownMenu>
<CDropdownItem className="dropdown-item pointer">View</CDropdownItem>
<CDropdownItem className="dropdown-item pointer">Edit</CDropdownItem>
<CDropdownItem
className="dropdown-item text-danger pointer"
onClick={() => Modal()} <- The issue lies here
>
Delete
</CDropdownItem>
</CDropdownMenu>
</CDropdown>
</CTableDataCell>
</CTableRow>;I would greatly appreciate any help or guidance on this matter. Feel free to ask if you need additional code snippets (I've omitted most of the Users.js file as it's quite lengthy) except for the specific row to give you an idea of the Delete button's location.
Thank you in advance!