Блог

У меня есть массив объектов, который отображается, через который возвращается модальный компонент чакры, но, похоже, возвращается только первый дочерний элемент в массиве. он отображает исправленную модальность, но показывает только первый элемент в массиве.

 import {
  Box,
  Button,
  Modal,
  ModalBody,
  ModalCloseButton,
  ModalContent,
  ModalFooter,
  ModalHeader,
  ModalOverlay,
  useDisclosure
} from "@chakra-ui/react";

const courses = [
  {
    courseTitle: "London",
    courseContent:
      "Lodon Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore deleniti assumenda quas minus, fugiat veniam necessitatibus laborum qui similique dolor!"
  },
  {
    courseTitle: "Geography",
    courseContent:
      "Geography Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore deleniti assumenda quas minus, fugiat veniam necessitatibus laborum qui similique dolor!"
  }
];

export default function () {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <Box mt={5} display="flex" gridGap={3}>
      {courses.map((course, idx) => (
        <Box as="section" key={idx}>
          <Button onClick={onOpen} size="sm">
            {course.courseTitle}
          </Button>

          <Modal isOpen={isOpen} onClose={onClose}>
            <ModalOverlay />
            <ModalContent>
              <ModalHeader>{course.courseTitle}</ModalHeader>
              <ModalCloseButton />
              <ModalBody>{course.courseContent}</ModalBody>

              <ModalFooter>
                <Button colorScheme="blue" mr={3} onClick={onClose}>
                  Close
                </Button>
              </ModalFooter>
            </ModalContent>
          </Modal>
        </Box>
      ))}
    </Box>
  );
}
 

Codesandbox: https://codesandbox.io/s/objective-wave-woiek

Проверка devtools показала, что оба ваших модала открывались при нажатии любой кнопки, причем Geography модал был вверху. Его можно легко закрепить, переместив крючок на отдельный компонент.

 const IsolatedModal = ({ course }) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  return (
    <Box as="section">
      <Button onClick={onOpen} size="sm">
        {course.courseTitle}
      </Button>
      <Modal isOpen={isOpen} onClose={onClose}>
        ...
      </Modal>
    </Box>
  );
};
 

 export default function () {
  return (
    <Box mt={5} display="flex" gridGap={3}>
      {courses.map((course, idx) => (
        <IsolatedModal key={idx} course={course} />
      ))}
    </Box>
  );
}