Loop an array index inside a map in ReactJS

Question

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>
    );

Andrii Starusiev · Accepted Answer · 2018-12-25 12:04:59Z

5

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>
    );

answered Dec 25, 2018 at 12:04

Andrii Starusiev

7,7842 gold badges31 silver badges40 bronze badges

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

Comments

kadeer · Accepted Answer · 2018-12-25 12:25:02Z

2

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>
    );

edited Dec 25, 2018 at 12:25

answered Dec 25, 2018 at 12:06

kadeer

1511 silver badge9 bronze badges

Comments

Sahil Raj Thapa · Accepted Answer · 2018-12-25 12:06:07Z

1

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>
        );

answered Dec 25, 2018 at 12:06

Sahil Raj Thapa

2,4833 gold badges16 silver badges25 bronze badges

Collectives™ on Stack Overflow

Loop an array index inside a map in ReactJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related