{filteredBookings.map((booking, index) => (
<Modal
key={index} // Make sure to provide a unique key
open={detailModalVisible}
onCancel={(e) => {
setDetailModalVisible(false);
setCurrentBookingIndex(null);
}}
footer={null}>
<EachBooking
key={currentBookingIndex} // Ensure EachBooking components have unique keys
selectedBooking={selectedBooking}
roomId={selectedRoomId}
roomName={selectedRoomName}
username={username}
toPreviousMainModal={toPreviousMainModal}
/>
</Modal>
))}
I have submodal in <EachBooking />
that will open when click on main modal.
when I inspect the antd custom class antd-modal-mask it has rgba(0, 0, 0, 0.45) which is their default. But I don’t see that property in submodal, and the mask appears to be darker like it doubles or overlap 0.45. I want the same alpha 0.45 mask on every modal. How can I do that?
2
Answers
Because you are mapping a modal. This will cause several modals to appear which will overlay on one other. Remove the mapping and it will work.
You can use createPortal to render a modal with a portal.
This way the you can hide the parent modal without hiding the child.