I have three components
Services (contains the data),
SizeimgcontentfooterCard4,
ServicesModal
the data looks like
export const serviceItemInformation = [ { title: "...", id:"...", paragraph: ["..."], image:{src: "...", alt:"..."}, modal: { title: "...", id: "...", icon:"...", image:{src: "...", alt:"..."}, list:[...], paragraph: ["..."], } }, {...} ] The Services sends mapped out data to SizeimgcontentfooterCard4 as well as ServicesModal components
<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> The SizeimgcontentfooterCard4 is a reusable card that displays content with a button that opens the modal component ServicesModal
The Items I get in SizeimgcontentfooterCard4 matches correctly with what i was expecting. But on ServicesModal component I only get values of the last object in serviceItemInformation.
The ServiceModal Component is
`
const ServicesModal = ({open, setOpen, modal,}) => {
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> ) } `
What could the problem be?
Link to stackOverflow
Top comments (0)