React trick to interrupt the map loop

Original link: https://bobbyhadz.com/blog/react-map-break

Author: Borislav Hadzhiev

The text starts here~

Overview

In React, breaking map() loop:

1. Call the slice() method on the array to get a part of the array.
2. Call the map() method on the partial array.
3. Iterate over part of the array.

 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>
  );
}

slice

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

We pass the following two parameters to the slice() method:

name	describe
startIndex	The new array contains the index of the first element
endIndex	So far, but not including this index

We specified a starting index of 0, and an ending index of 2. So we get a partial array with the first two elements.

Even if you supply the Array.slice method with an ending index that exceeds the length of the array, the method will not throw an error. But will return all array elements.

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

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

We try to get the first 100 elements of an array, which contains only 3 elements. So the new array contains all 3 elements of the original array.

filter

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

 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 pass to the filter() method will be called for each element in the array. On each iteration, we check if the current object has country property equal to Belgium or Denmark and return the result of the comparison.

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

In this example, the map() method will only be called on objects whose id attribute values are 2 and 4.

negative index

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

 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>
  );
}

Pass a negative index to the slice() method, indicating the offset from the end of the array. -2 index means give me the last two elements of the array. This is the same as passing the array.length - 2 parameter to the slice method.

 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 to copy the last two elements of the array and place them in a new array.

Even if we try to get more elements of the array, Array.slice will not throw an error, instead it will return a new array with all the elements.

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

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

In this example, we are trying to get the last 100 elements of an array with only 3 elements, so all elements of that array are copied into the new array.