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)