Issue
I want the data of the title to appear in the modal window when I click the 'Open Modal' button in the Carousel. But the way I implemented it is that all Carousel title data is in one modal window.
If I click the 'Open Modal' button, how can I make sure that only those titles, not all titles of Carousel, enter the modal window?
For example, if you click the 'Open Modal' button in the 'Exercise App' Carousel, only the words 'Exercise App' should appear in the modal window.
P.S. I use 'chakra ui'
-Modal components-
const CarouselModal = (props: any) => {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<div>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>this</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
);
};
export default CarouselModal;
-Carousel components-
{cards.map((card, index) => (
<Box
key={index}
height={"6xl"}
position="relative"
backgroundPosition="center"
backgroundRepeat="no-repeat"
backgroundSize="cover"
backgroundImage={`url(${card.image})`}
>
<Container size="container.lg" height="600px" position="relative">
<Stack
spacing={6}
w={"full"}
maxW={"lg"}
position="absolute"
top="50%"
transform="translate(0, -50%)"
>
<Heading
fontSize={{ base: "3xl", md: "4xl", lg: "5xl" }}
color="white"
>
<Contain>{card.title}</Contain>
</Heading>
<Contain>
<Text
fontSize={{ base: "3xl", lg: "lg" }}
color="white"
fontWeight="bolder"
>
{card.text}
<br />
{card.TechnologyStackText}
<br />
</Text>
<ModalContain>
<CarouselModal />
</ModalContain>
</Contain>
</Stack>
</Container>
</Box>
))}
Solution
Pass the card.title
value as a prop to the CarouselModal
component.
Example:
<ModalContain>
<CarouselModal title={card.title} />
</ModalContain>
Then reference the props.title
in the modal component.
const CarouselModal = ({ title }: { title: string }) => {
const { isOpen, onOpen, onClose } = useDisclosure();
return (
<div>
<Button onClick={onOpen}>Open Modal</Button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Modal Title</ModalHeader>
<ModalCloseButton />
<ModalBody>{title}</ModalBody>
<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
);
};
Answered By - Drew Reese
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.