I need help I having problem passing data to a child component
Tags: javascript, react, jsx, webdev
Published: 2022-04-19 13:27:45

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 ](https://stackoverflow.com/questions/71922939/i-am-getting-mapping-error-when-sending-props-to-children)