How to break a map() loop in React

Break a map() loop in React #

To break a map() loop 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 2 elements of array

  return (
    <div>
      {employees.slice(0, 2).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 2, so we got a portion of the array with elements 0 and 1.

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.

You can also use the Array.filter method before calling map().

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 2 elements of array

  return (
    <div>
      {employees
        .filter(employee => {
          return (
            employee.country === 'Belgium' || employee.country === 'Denmark'
          );
        })
        .map((employee, index) => {
          return (
            <div key={index}>
              <h2>name: {employee.name}</h2>
              <h2>country: {employee.country}</h2>

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

The function we passed to the filter() method gets called with each element in the array.

On each iteration, we check if the current object has a country property equal to Belgium or Denmark and return the result.

The filter() method returns an array containing only the elements for which the callback function returns a truthy value.

In the example, the map() method is only called with the objects with id of 2 and 4.

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 2 elements of array

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

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

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

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

App.js

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

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

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

Either way, we tell the slice method, copy the last 2 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 break a map() loop in React

Break a map() loop in React #

Borislav Hadzhiev