From e2597fbcd21514abba04cde892da28889d64ba55 Mon Sep 17 00:00:00 2001
From: Ayanava Karmakar <karmakarayanava2021@gmail.com>
Date: Mon, 24 Mar 2025 20:02:02 +0530
Subject: [PATCH] docs: fix invalid JSX in code snippets in
 `platform/guides/booking-redirects` (#20321)

---
 docs/platform/guides/booking-redirects.mdx | 71 +++++++++++-----------
 1 file changed, 37 insertions(+), 34 deletions(-)

diff --git a/docs/platform/guides/booking-redirects.mdx b/docs/platform/guides/booking-redirects.mdx
index 9181eae9eb..e81d7f4b80 100644
--- a/docs/platform/guides/booking-redirects.mdx
+++ b/docs/platform/guides/booking-redirects.mdx
@@ -33,13 +33,13 @@ export default function Bookings(props: { calUsername: string; calEmail: string
     const { isLoading, data: booking, refetch } = useBooking((router.query.bookingUid as string) ?? "");
 
     return (
-        if (!Array.isArray(booking)) {
-            <p>{booking.title}</p>
-        } else {
-            {for (const recurrence of booking) {
-                <p>{recurrence.title}</p>
-            }}
-        }
+        <>
+          {!Array.isArray(booking) ? (
+              <p>{booking.title}</p>
+          ) : (
+              booking.map((recurrence) => <p key={recurrence.id}>{recurrence.title}</p>)
+          )}
+        </>
     )
 };
 ```
@@ -96,33 +96,36 @@ const { mutate: cancelBooking } = useCancelBooking({
     },
   });
 ...
-   return (
-        if (!Array.isArray(booking)) {
-            <button
-                className="underline"
-                onClick={() => {
-                    cancelBooking({
-                        id: booking.id,
-                        cancellationReason: "User request",
-                    });
-                }}>
-                Cancel
-            </button>
-        } else {
-            {for (const recurrence of booking) {
-                <button
-                    className="underline"
-                    onClick={() => {
-                        cancelBooking({
-                            id: recurrence.id,
-                            cancellationReason: "User request",
-                        });
-                    }}>
-                    Cancel
-                </button>
-            }}
-        }
-    )
+   return !Array.isArray(booking) ? (
+    <button
+      className="underline"
+      onClick={() => {
+        cancelBooking({
+          id: booking.id,
+          cancellationReason: "User request",
+        });
+      }}
+    >
+      Cancel
+    </button>
+  ) : (
+    <>
+      {booking.map((recurrence) => (
+        <button
+          key={recurrence.id}
+          className="underline"
+          onClick={() => {
+            cancelBooking({
+              id: recurrence.id,
+              cancellationReason: "User request",
+            });
+          }}
+        >
+          Cancel
+        </button>
+      ))}
+    </>
+  );
 ```
 
 An example implementation can be found [here](https://github.com/calcom/cal.com/blob/main/packages/platform/examples/base/src/pages/booking.tsx).