Use map() on an Array in Reverse Order in React

avatar

Borislav Hadzhiev

Last updated: Apr 22, 2022

banner

Photo from Unsplash

Use map() on an Array in Reverse Order in React #

To use the map() method on an array in reverse order in React:

  1. Use the spread syntax (...) to get a copy of the array.
  2. Use the reverse() method to reverse the copied array.
  3. Call the map() method on the reversed array.
App.js
export default function App() { const employees = [ {id: 1, name: 'Alice', salary: 100}, {id: 2, name: 'Bob', salary: 75}, {id: 3, name: 'Carl', salary: 125}, ]; return ( <div> {[...employees].reverse().map((employee, index) => { return ( <div key={index}> <h2>Name: {employee.name}</h2> <h2>Salary: {employee.salary}</h2> <hr /> </div> ); })} </div> ); }

The spread syntax (...) unpacks the values from the original array into a new array, creating a shallow copy.

We reversed the copy to avoid mutating the original array and called the map() method on the reversed array.

The Array.reverse method changes the contents of the original array in place.

App.js
const arr = ['a', 'b', 'c']; const reversed = arr.reverse(); console.log(reversed); // 👉️ ['c', 'b', 'a'] console.log(arr); // 👉️ ['c', 'b', 'a']

The reverse() method reverses an array in place and returns the result. This might not be the behavior you're looking for.

Notice that the original array stored in the arr variable was also reversed.

This is the reason we created a shallow copy in advance - to avoid changing the original array.

The last step is to use the Array.map method on the reversed array.

An alternative approach is to use the Array.slice method.

To use the map() method on an array in reverse order in React:

  1. Use the slice() method to get a copy of the array.
  2. Use the reverse() method to reverse the copied array.
  3. Call the map() method on the reversed array.
App.js
export default function App() { const employees = [ {id: 1, name: 'Alice', salary: 100}, {id: 2, name: 'Bob', salary: 75}, {id: 3, name: 'Carl', salary: 125}, ]; return ( <div> {employees .slice(0) .reverse() .map((employee, index) => { return ( <div key={index}> <h2>Name: {employee.name}</h2> <h2>Salary: {employee.salary}</h2> <hr /> </div> ); })} </div> ); }

The first step is to use the Array.slice method to create a shallow copy of the array.

The only parameter we passed to the slice method is the start index - the index of the first element to be included in the new array.

By passing a start index of 0 and no end index, we create a shallow copy of the original array, which we can reverse.

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

This achieves the same result as the example that used the spread syntax (...).

Which approach you pick is a matter of personal preference. I'd go with the spread syntax (...) because it's more readable and intuitive, especially if the reader of your code is not familiar with the parameters the slice method takes.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.