Borislav Hadzhiev
Fri Apr 22 2022·3 min read
Photo by Ellery Sterling
To map() only a portion of an array 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 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
.
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.
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 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> ); }
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.
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.
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.