How to make use of variable name using array of string in React.js

Question

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?

Mayank Shukla · Accepted Answer · 2017-08-16 08:55:54Z

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.

edited Aug 16, 2017 at 8:55

answered Aug 16, 2017 at 7:47

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

Comments

Ji aSH · Accepted Answer · 2017-08-16 07:44:40Z

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]} />
);}

answered Aug 16, 2017 at 7:44

Ji aSH

3,4841 gold badge12 silver badges20 bronze badges

Comments

Umesh · Accepted Answer · 2017-08-16 07:48:57Z

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}/>
  })
}

answered Aug 16, 2017 at 7:48

Umesh

2,74221 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to make use of variable name using array of string in React.js

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related