Looking for a way to dynamically add background images to div elements? I'm currently iterating over an array of objects and returning divs, but I'm not sure how to set the background image based on the image URL in each object. Can anyone help me with this?
Below is the code snippet:
const useStyles = makeStyles({
div: (props) => ({
width: "100px",
height: 0,
paddingBottom: "100px",
backgroundImage: "how can I determine which image to display",
}),
});
let arr = [
{ photo_url: "some url" },
{ photo_url: "some url" },
{ photo_url: "some url" },
];
function Test() {
const classes = useStyles("how can I provide the image for each object here");
return arr.map((obj) => <div className={classes.div}></div>);
}
Note: To keep it simple, I've used the style prop to handle dynamic styling and the className prop for generic styles shared by all divs.