How To Reverse An Array In React

The topic of this article will be how to reverse an array in React, you can do this in a few ways for example using the array.reverse() method or using a for loop to do it. Let’s go into detail now.

Reverse an array in React

For example, we have an array of pets with three elements in a predefined order, but the client asks you to reverse the array in reverse order. The array is as follows:

const pets = ["Cat", "Dog", "Hamster"];

So how can you reverse this Array? Let’s see how to do it in the next part of the article to get the answer.

Using Array.reverse() method

The JavaScript array reverse() method reverses the order of the elements of an array – First becomes last, and lastly becomes first.

Syntax:

array.reverse();

Parameters:

• Return value.
• Returns the reversed single value of the array.

This is exactly what we need now; Javascript supports a lot of built-in functions to do simple requests with any type of value in the language. What you need to do is researching them in documents in this language.

Code:

import React from "react";

const App = () => {
  const pets = ["Cat", "Dog", "Hamster"];
  const reversedPets = pets.reverse();
  return (
    <>
      <h2>How to Reverse an Array in React | LearnShareIT</h2>
      <hr/>
      <h3>{JSON.stringify(reversedPets)}</h3>
    </>
  );
};

export default App;

Output:

As you can see, we simply add a reverse() to the back of the array to be reversed, and it will return us an array of results. I have rendered it to the screen for your convenience. The hamster element has been moved to the beginning and cat to the end of the array, so the result should be the same as what we need.

Using for loop method

With the for loop, we will instate the counter factor, check the condition, and augmentation or decrement of the variable are finished on a similar line, so it is very simple for novices to troubleshoot and diminish the chance of blunders. In this way, we will use looping a descending array to be able to cycle through from the last element to the top.

Code:

import React from "react";

const App = () => {
  const pets = ["Cat", "Dog", "Hamster"];

  function reverseArr(array) {
    var reversedArray = new Array([]);

    for (var i = array.length - 1; i >= 0; i--) {
      reversedArray.push(array[i]);
    }
    
    return reversedArray;
  }

  return (
    <>
      <h2>How to Reverse an Array in React | LearnShareIT</h2>
      <hr/>
      <h3>{JSON.stringify(reverseArr(pets))}</h3>
    </>
  );
};

export default App;

The return results of the two ways are the same. In this for loop, we will run backward from the last element to the top with the index of each element. What we do is simply creating an empty array and pushing the passed values ​​into the array. Wish you success with the methods mentioned in the article.

Summary

To summarize, the article has written you how to reverse an array in React, but you should use the array.reverse() because it is a built-in function. If you have any questions, please comment below. Thanks for reading!

Maybe you are interested:

• Render nested array using map() in React
• Sort an Array of Objects in React
• Get the First element of an Array in React.js

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs