CODEWITHSUNDEEP
javascriptarraysreactjs
KemanoThief
KemanoThief

Reputation: 617

How to loop through an array and render the items in two different places in JavaScript

In my React app, I have a grid that I need to add items to. It looks similar to this:

<div className="row">
  <div className="col full-width">[3 items to go here]</div>
</div>
<div className="row">
  <div className="col two-thirds">[2 items to go here]</div>
  <div className="col one-third"><img /></div>
</div>
<div className="row">
  <div className="col full-width">[remaining items to go here]</div>
</div>

The items are stored in an Array.

What's the most efficient way to loop through the array, add the first three items to one div, the second three items to another div and the rest to a third div?

Upvotes: 0

Views: 44

Answers (1)

PhilVarg
PhilVarg

Reputation: 4811

using the slice function seems like a pretty straightforward approach.

by using something like this.props.foo.slice(0,3),this.props.foo.slice(3,6), this.props.foo.slice(6) to grab slices of the collection you want to split up and then mapping over them to render what you need

Upvotes: 1

Related Questions