CODEWITHSUNDEEP
reactjs
VersifiXion
VersifiXion

Reputation: 2292

ReactJS - Loop the src of an image inside a map

I have an image inside a .map, and I want at every loop to change the src of this image

My images are in a folder, to import all of them it would be like this :

const firstImage = require(`../../../images/metros/1.svg`);
const secondImage = require(`../../../images/metros/2.svg`);
const thirdImage = require(`../../../images/metros/3.svg`);

How can I import all the images at once, and then put them inside the src of the image inside of the map?

I created 3 arrays (const metrosLines, const rersLines, const tramwaysLines) with the names of the images inside the "metros" folder

Here's my code and the src to loop on is where I wrote "I WANT TO LOOP THIS SRC ->"

const { transport, data } = this.props;
const transportImage = require(`../../../images/${transport}/${transport}.svg`);
const metrosLines = ['1', '2', '3', '3bis', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14'];
const rersLines = ['a', 'b', 'c', 'd', 'e'];
const tramwaysLines = ['1', '2', '3a', '3b', '5', '6', '7', '8'];
const displayTrafic = data.map(line =>
    <Col xs="12" sm="12" md="6" key={line.line}>
        <Media>
            <Media left>
                <Media object data-src="holder.js/64x64" (I WANT TO LOOP THIS SRC ->) src={ metrosImages } alt="Logo ligne RATP" />
            </Media>
            <Media body>
                <Media heading>
                    {line.title}{line.slug === "normal" ? <i className="fas fa-check green"></i> : <i className="fas fa-times red"></i>}
                </Media>
                {line.message}
            </Media>
        </Media>
    </Col>
);

EDIT: I succeeded to do the loop

const metrosImages = metrosLines.map((line) => {
        for (let i = 0; i < metrosLines.length; i++) {
            const importMetroImage =  require(`../../../images/${transport}/${metrosLines[i]}.svg`);
            return importMetroImage;
        }
    });

but every loop result is put next to the previous, so the src of the image is src="/static/media/1.68dded27.svg,/static/media/1.68dded27.svg,/static/media/1.68dded27.svg,/static/media/1.68dded27.svg,/static/media/1.68dded27.svg,/static/media/1.68dded27.svg,/static/media/1.68dded27.svg,/static/media/1.68dded27.svg,/static/media/1.68dded27.svg,/static/media/1.68dded27.svg,/static/media/1.68dded27.svg,/static/media/1.68dded27.svg,/static/media/1.68dded27.svg,/static/media/1.68dded27.svg,/static/media/1.68dded27.svg"

Upvotes: 1

Views: 113

Answers (1)

Tony Bui
Tony Bui

Reputation: 1299

This is my code, hope it fix your problem. 

const displayTrafic = data.map((line, i) =>{
      const metrosLines = ['1', '2', '3', '3bis', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14'];
      const importMetroImage =  require(`../../../images/${transport}/${metrosLines[i]}.svg`);
      const componentImage = <Media object data-src="holder.js/64x64"  src= {importMetroImage}  alt="Logo ligne RATP" />;
      return (
          <Col xs="12" sm="12" md="6" key={line.line}>
            <Media>
                <Media left>
                  {componentImage}
                </Media>
                <Media body>
                    <Media heading>
                        {line.title}{line.slug === "normal" ? <i className="fas fa-check green"></i> : <i className="fas fa-times red"></i>}
                    </Media>
                    {line.message}
                </Media>
            </Media>
          </Col>
      )
    }
    );

Upvotes: 1

Related Questions