🔄 Displaying React Components in Reverse Order
Tags: react, javascript
Published: 2023-10-14 08:02:38

## ⚠Disclaimer
This article has been translated using ChatGPT by the author; as such, some parts may not be accurately represented or contextually appropriate. For the original content, please refer to the link provided below.
https://zenn.dev/bony_chops/articles/34969d261d7553

## Preface

https://bonychops.com

While creating my own portfolio, I realized that my professional experiences were listed in ascending chronological order.


![A timeline graphic displaying significant events or milestones. At the top, there's a "Show All" toggle and a reference link to "Wantedly". Entries are denoted with dates and ages: 2002.07.30 at 0 years old: A symbol (possibly representing birth) with the text "誕生" (meaning "Birth"), 2018.04 at 16 years old: A symbol with Japanese characters indicating a school or educational milestone, 2020.10.7 - 10.28 at 18 years old: Details about a project titled "WebxIoT メイカーズチャレンジ 2020-21 in 信州 長野", with technologies used such as JavaScript, MaterializeCSS, and GitHub Pages, 2022.11.28 - 12.17 at 20 years old: An event or competition titled "Hack U KOSEN 2022" followed by some Japanese characters, Each entry has corresponding icons indicating the type of event or the technologies used. The background is white, and the timeline is indicated with a central dotted line.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28rtc323kluqjlew7km8.png)

However, looking at Wantedly, I noticed that the experiences are listed in descending order. I want my format to align with this.


![A profile section featuring a male individual's photo on the left. The section is titled "この先やってみたいこと" (What I'd like to do in the future). Below the title: A brief description: The individual expresses interest in learning and working on complex systems such as large-scale cloud platforms, contributing to open-source projects, and improving system reliability. Following this description, there's a vertical timeline: From July 2023 to October 2023: An entry labeled "ピクシブ株式会社" (Pixiv Corporation) with a duration of 4 months, accompanied by the text "フラットワーク研究部（インターン）" indicating an internship in the Flatwork Research Department, Starting from January 2020: An entry titled "アドリエももも" (Atelier Momomo) with a duration of 3 years, accompanied by the text "システムメンテナ - 独立", which indicates the role of independent system maintainer, The background is white, with events and descriptions connected by a dotted line.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hljeppq1t5dxhj8cte26.png)

But now, reversing the order of this many components would be a huge task...


![A screenshot of a VSCode preview thumbnail displaying multiple lines of code. The code consists of various color-coded syntax elements, suggesting a structured program or script. The specific content of the code is not detailed, but the image conveys a dense coding environment.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zm72balmitsi1o3i5z67.png)

## Strategy
For instance, we aim to reverse the order of the following components.

```tsx
<div>
	<p>a</p>
	<p>b</p>
	<p>c</p>
</div>
```

![a, b, c](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gyoelchax89l4u7ox9yo.png)

↑I want the order to be c, b, a.

1. Create a `<ReverseComponent>`
1. Enclose the target components with it

## Creating the `ReverseComponent`
First, we will create the ReverseComponent as follows
```tsx
import React from "react";

export default function ReverseComponent(props: {
  children: React.ReactNode;
}) {
  const { children } = props;
  const reverse = props.reverse ?? true;

  if (Array.isArray(children)) {
    return children.slice().reverse();
  }
  return children;
}
```

When multiple components are passed to children, they are passed as an Array. So, if it is an Array, we use `.reverse()` to reverse the order.

### About `.slice`
Since `children` are passed as readOnly, we cannot use the destructive `.reverse()`. So, we use `.slice()` to make a shallow copy and use it.

## Enclosing the Components
```diff
 <div>
+	<ReverseComponent>
 		<p>a</p>
 		<p>b</p>
 		<p>c</p>
+	</ReverseComponent>
 </div>
```


![c, b, a](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0myc811t2ncnj6r8ojmd.png)

Tada 🎉

## Making it Switchable
```diff
 import React from "react";
 
 export default function ReverseComponent(props: {
   children: React.ReactNode;
+  reverse?: boolean;
 }) {
   const { children } = props;
+  const reverse = props.reverse ?? true;
 
   if (Array.isArray(children)) {
-    return children.slice().reverse();
+    return reverse ? children.slice().reverse() : children;
   }
   return children;
 }
```

```diff
 <div>
-	<ReverseComponent>
+	<ReverseComponent reverse={false}>
 		<p>a</p>
 		<p>b</p>
 		<p>c</p>
 	</ReverseComponent>
 </div>
```


![a, b, c](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqkhwfkznujvv56wwx0q.png)

Now you can dynamically switch between ascending and descending order.


## Applying to the Portfolio
It was extremely easy to reverse the order by just creating one component. Also, I made a button to reverse the order as a bonus.


![A section titled "Timeline" displaying user interface controls. There are two toggle switches labeled "Show All" (currently activated) and "Reverse". Below the controls, there's a reference link to "Wantedly". Further down, there's a timeline entry for the year 2023 indicating an age of 21 years old with an associated symbol and question marks (???), suggesting an unknown or undisclosed event. The background is white with a minimalistic design.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5i1vavp2djc0nvd5m70g.png)

https://github.com/BonyChops/portfolio-v3/pull/11