如何将 Javascript 变量集成到 ReactJS JSX 样式元素中

Question

I have a javascript array of image sources. Now I need to implement each of the image source in individual box background. I am trying to put the array element into React JSX style element like below (demo code)

    const box = []

    for(const [index, image] of images.entries()) {
        box.push(
           <Box key={index} style={{background: 'url(image)'}}>
              Some code goes here.......
           </Box>
    )}

    return(<div>{box}</div>)

Hope I can make you understand my problem. Please help, any alternative way is always welcome. thank you in advance

Answer 1

For loop won't work directly in render function. you can use map instead

images.map((image, index) => (
  <Box key={index} style={{background: `url(${image})`}}>
       Some code goes here.......
  </Box>
))

Check this example: https://codesandbox.io/s/broken-frost-4iz90

You can check this as well: Loop inside React JSX

Hope this helps!