How to integrate Javascript variable into ReactJS JSX style element

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

Use something like: const imageBoxes = images.map((image, index) => <JSX />). You can then render <div>{imageBoxes}</div> into your main render, or do the .map directly in there. — Jamie Dixon
– Jamie Dixon, Commented Oct 29, 2019 at 11:54
@JamieDixon Thanks for the response but my question was how to integrate javascript variable into React JSX style element. Like in the "style={{background: 'url(image)'}}" — Neel Debnath
– Neel Debnath, Commented Oct 29, 2019 at 11:58

Yash Joshi · Accepted Answer · 2019-10-29 12:02:54Z

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!

edited Oct 29, 2019 at 12:02

answered Oct 29, 2019 at 11:57

Yash Joshi

2,8441 gold badge14 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Neel Debnath Over a year ago

Thanks for the response but my question was how to integrate javascript variable into React JSX style element. Like in the "style={{background: 'url(image)'}}". Let me edit the code, it is creating confusion

Yash Joshi Over a year ago

I have updated the example. You can use template literal to define the variable. Here is the link to read more: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Yash Joshi Over a year ago

I have also added an example with the same use case. Hope this will help.

Collectives™ on Stack Overflow

How to integrate Javascript variable into ReactJS JSX style element

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related