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.