🔄 Displaying React Components in Reverse Order

Bony_Chops — Sat, 14 Oct 2023 08:02:38 +0000

⚠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.

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

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

Strategy

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

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

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

Create a <ReverseComponent>
Enclose the target components with it

Creating the `ReverseComponent`

First, we will create the ReverseComponent as follows

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

 <div>
+   <ReverseComponent>
        <p>a</p>
        <p>b</p>
        <p>c</p>
+   </ReverseComponent>
 </div>

Tada 🎉

Making it Switchable

 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;
 }

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

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.

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

Verifying My OpenPGP Key

Bony_Chops — Fri, 03 Feb 2023 01:53:10 +0000

This is an OpenPGP proof that connects my OpenPGP key to this dev.to account. For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:7B03D8A1D6B3D7A5129FB36C457BF5D69ECE0883]

DEV Community: Bony_Chops