简体   繁体   中英

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

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

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM