How to map() only a portion of an Array in React

Map() only a portion of an Array in React #

To map() only a portion of an array in React:

Call the slice() method on the array to get a portion of the array.
Call the map() method on the portion of the array.
Iterate over the portion of the array.

App.js

Copied!
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Delilah', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  // 👇️ map() first 3 elements of array

  return (
    <div>
      {employees.slice(0, 3).map((employee, index) => {
        return (
          <div key={index}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

The Array.slice method does not modify the original array, instead it creates a new array (a shallow copy of the original array).

We passed the following 2 parameters to the slice() method:

Name	Description
`startIndex`	The index of the first element to be included in the new array
`endIndex`	Go up to, but not including this index

We specified a start index of 0 and an end index of 3, so we got a portion of the array with elements 0, 1 and 2.

react map only part of array

Even if the end index you provide to the Array.slice method exceeds the array's length, the method does not throw an error, but returns all array elements.

App.js

Copied!
const arr = ['a', 'b', 'c'];

const first100 = arr.slice(0, 100);
console.log(first100); // 👉️ ['a', 'b', 'c']

We tried to get the first 100 elements of an array, which only contains 3 elements.

As a result, the new array contains all 3 elements of the original array.

If you want to map() through the last N elements of an array in React, pass a negative index to the Array.slice() method.

App.js

Copied!
export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Bob', country: 'Belgium'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Delilah', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  // 👇️ map() LAST 3 elements of array

  return (
    <div>
      {employees.slice(-3).map((employee, index) => {
        return (
          <div key={index}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

map last n elements of array

Passing a negative index to the slice() method indicates an offset from the end of the array. A negative index of -3 means give me the last 3 elements of the array.

This is the same as passing array.length - 3 as an argument to the slice method.

App.js

Copied!
const arr = ['a', 'b', 'c', 'd', 'e'];

const last3 = arr.slice(-3);
console.log(last3); // 👉️ ['c', 'd', 'e']

const last3Again = arr.slice(arr.length - 3);
console.log(last3Again); // 👉️ ['c', 'd', 'e']

Either way, we tell the slice method, copy the last 3 elements of the array and place them in a new array.

Even if we try to get more elements than the array contains, Array.slice won't throw an error, instead it returns a new array with all elements.

index.js

Copied!
const arr = ['a', 'b', 'c'];

const last100 = arr.slice(-100);
console.log(last100); // 👉️ ['a', 'b', 'c']

In the example, we tried to get the last 100 elements of an array which only contains 3 elements, so all of the array's elements got copied to the new array.

How to map() only a portion of an Array in React

Map() only a portion of an Array in React #

Borislav Hadzhiev