What should I do to change the contents of the modal according to the contents of the carousel?

Question

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>
        ))}

Answer 1

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>
  );
};