JIYIK CN >

Breaking out of a map() loop in React:

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

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {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>
  );
}

Array.sliceThe method does not modify the original array, but creates a new array (a shallow copy of the original array).

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

• startIndex The index of the first element to be included in the new array
• endIndex The ending value, but not including this index

We specified a starting index of 0 and an ending index of 2, so we get the portion of the array that contains elements 0 and 1.

Even if the ending index provided to Array.slicethe method exceeds the length of the array, the method will not throw an error but return all the array elements.

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

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

We are trying to get the first 100 elements of an array which contains only 3 elements.

Therefore, the new array contains all 3 elements of the original array.

We can also map()use Array.filterthe method before calling .

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {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 filter()the method is called for each element in the array.

In each iteration, we check if the country property of the current object is equal to Belgium or Denmark and return the result.

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

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

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

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {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 slice()the method represents an offset from the end of the array. A negative index of -2 means give me the last 2 elements of the array.

This array.length - 2is the same as passing as an argument 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 are telling slicethe method to copy the last 2 elements of the array and put them into a new array.

Even if we try to get more elements than the array contains, Array.sliceno error is thrown, instead a new array containing all the elements is returned.

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

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

In the example, we try to get the last 100 elements of an array that contains only 3 elements, so all elements of the array are copied to the new array.