2

What I'm trying to do is removal of duplicate codes like below. 

import icon1 from './images/abc.png'
import icon2 from './images/xyz.png'
import icon3 from './images/pqr.png'
import icon4 from './images/stu.png'
...

<img src={icon1}/>
<img src={icon2}/>
<img src={icon3}/>
<img src={icon4}/>
...

I want to rewrite above code using loop or map function like below conceptually.

let array = [1,2,3,4];

{array.map( v =>
  <img src={icon + v} />
);}

Sure, it does not work. In using React.js, how can I make use of variable using string concatenation?

Birmjin In
  • 129
  • 1
  • 9

3 Answers3

2

Not sure about the best solution, but this one will work.

Instead of storing 1,2,3,4 in an array, store the image names like this:

let imgArr = ['abc', 'xyz', 'stu'];

When use require:

{
    imgArr.map(v =>
        <img src={require(`./images/${v}.png`)} />
    );
}

Note: No need to import all the images at the top, if you are using this.

Mayank Shukla
  • 100,735
  • 18
  • 158
  • 142
0

Create a variable:

let ICONS = {
    1: icon1,
    2: icon2,
    3: icon3,
    4: icon4
}

Then access its fields

{array.map( v =>
    <img src={ICONS[v]} />
);}
Ji aSH
  • 3,206
  • 1
  • 10
  • 18
0

You can certainly do it 

const icons = [ { id: 1, src: './images/abc.png'},
{ id: 2, src: './images/def.png'} ]  // add more 

{ icons.map( (item) => { 
    <img key={item.id} src={item.src}/>
  })
}
Umesh
  • 2,704
  • 19
  • 21