How to loop through some items in an array in React JSX

Question

My question is regarding how to iterate partially through an array in React JSX. Instead of calling .map and iterating through all the items in profile.categories, I only want to display the first five items in the array. I currently have the following code:

<div className="categories">
   {profile.categories.map(category => (
       <div
         className="profile-categories"
         style={{ float: "left" }}
       >
         {category}
       </div>
     ))}
 </div>

Answer 1

Use slice directly on profile.categories, like so:

<div className="categories">
{profile.categories.slice(0, 5).map(category => (
   <div
     className="profile-categories"
     style={{ float: "left" }}
   >
     {category}
   </div>
 ))}
 </div>

Answer 2

Just use slice with map:

profile.categories.slice(0, 5).map(...)

Also you can add method for getting some count of categories in component:

getFirst(count) {
  return profile.categories.slice(0, count);
}

// and then in render:
this.getFirst(5).map(...)