CODEWITHSUNDEEP
javascriptreactjs
VersifiXion
VersifiXion

Reputation: 2292

Loop an array index inside a map in ReactJS

I have a {metrosImages[0]} inside of a map and I want at every loop to increment the number by 1. For example, at the 1st loop -> {metrosImages[0]}, then {metrosImages[1]}, then {metrosImages[2]} until the loop is at its end.

Everything in the code works, and I just need to do this.

const displayTrafic = data.map(line =>
        <Col xs="12" sm="12" md="6" key={line.line}>
            <Media>
                <Media left>
                   {metrosImages[0]}
                </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: 3

Views: 96

Answers (3)

kadeer
kadeer

Reputation: 151

So. Array.map has passes a second argument of index which is the current index of the loop's iteration. So you can use 

const displayTrafic = data.map((line, i) =>
        <Col xs="12" sm="12" md="6" key={line.line}>
            <Media>
                <Media left>
                   {metrosImages[i]}
                </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: 2

Sahil Raj Thapa
Sahil Raj Thapa

Reputation: 2483

Use index as another argument inside map function

   const displayTrafic = data.map((line, index) =>
            <Col xs="12" sm="12" md="6" key={line.line}>
                <Media>
                    <Media left>
                       {metrosImages[index]}
                    </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

Andrii Starusiev
Andrii Starusiev

Reputation: 7774

You can use map index:

const displayTrafic = data.map((line, index) =>
        <Col xs="12" sm="12" md="6" key={line.line}>
            <Media>
                <Media left>
                   {metrosImages[index]}
                </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: 5

Related Questions