Borislav Hadzhiev
Fri Apr 22 2022·3 min read
Photo by Jeremy Bishop
To break a map() loop in React:
slice()
method on the array to get a portion of the array.map()
method on the portion 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> ); }
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
.
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.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()
.
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.
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.
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.
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.
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.