하위 구성 요소에 데이터를 전달하는 데 문제가 있어 도움이 필요합니다.

세 가지 구성 요소가 있습니다
서비스(데이터 포함),
크기imgcontentfooterCard4,
서비스모달

데이터는 다음과 같습니다

export const serviceItemInformation = [
  {
       title: "...",
       id:"...",
       paragraph: ["..."],
       image:{src: "...", alt:"..."},
       modal: {
          title: "...",
          id: "...",
          icon:"...",
          image:{src: "...", alt:"..."},
          list:[...],
          paragraph: ["..."],
     }
  },
  {...}
    ]

서비스는 매핑된 데이터를 SizeimgcontentfooterCard4 및 ServicesModal 구성 요소로 보냅니다.

<Container sx={containerWrapper} maxWidth="xl">
        <Grid container spacing={2}>
            {
                serviceItemInformation.map(el => (
                    <>
                        <Grid sx={gridStyle} key={el.id} item lg={4} sm={12} >
                           <SizeimgcontentfooterCard4
                                title={el.title}
                                image={el.image.src}
                                alt={el.image.alt}
                                paragraph={el.paragraph}
                                id={el.id}
                                modalData={el.modal}
                                handleModal={handleModal}
                                modal={modal}
                            />
                            <ServicesModal open={modal} setOpen={setModal} modal={el.modal}/>
                        </Grid>
                    </>
                ))
            }
        </Grid>
</Container>

SizeimgcontentfooterCard4는 모달 구성 요소 ServicesModal을 여는 버튼으로 콘텐츠를 표시하는 재사용 가능한 카드입니다.

SizeimgcontentfooterCard4에서 얻은 항목이 내가 기대했던 것과 정확히 일치합니다. 그러나 ServicesModal 구성 요소에서는 serviceItemInformation의 마지막 개체 값만 ​​가져옵니다.

ServiceModal 구성 요소는

`
const ServicesModal = ({열기, setOpen, 모달,}) => {

    const StyledModalImageArea = styled(Grid)(({theme}) => ({
        width: "100%",
        height: "100%",
        backgroundColor: "red",
        position: "relative",
        padding: 0,
        backgroundImage: `linear-gradient(to right, rgba(0, 0, 0, 0.555), rgba(0, 0, 0, 0.484)), url(${modal.image.src})`,
        backgroundPosition: "center",
        backgroundAttachment: "local",
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat",
        transition: "0.5s", 
        color: "#fff",
        borderTopLeftRadius: 10,
        borderBottomLeftRadius: 10
    }))



    return (
        <StyledBackDrop
            open={open}
            onClick={() => setOpen(false)}
            sx={{ color : "rgba(0, 0, 0, 0.56) !important",  zIndex: (theme) => theme.zIndex.drawer + 1 }}
            transitionDuration= {1000}
        >
            <StyledModal
                hideBackdrop
                open={open}
                onClose={() => setOpen(false)}
                aria-labelledby="modal-modal-title"
                aria-describedby="modal-modal-description"
            >
                    <StyledModalItems container sx={detailsContainer}>
                        <StyledModalImageArea item lg={5} sm={12}>
                            <BoxOverlay>
                                {modal.icon}
                            </BoxOverlay>
                        </StyledModalImageArea>

                        <Grid item lg={7} sm={12}>
                            <Typography id="modal-modal-title" variant="h4" gutterBottom component="h2">
                                { modal.title }
                            </Typography>
                        </Grid>
                    </StyledModalItems>
            </StyledModal>
        </StyledBackDrop>
    )
}

`
무엇이 문제일까요?

링크stackOverflow