Use Docusaurus BrowserOnly for state

src/components/FaqAccordion.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useEffect, useState } from 'react';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import {
   Accordion,
   AccordionItem,
@@ -20,6 +21,7 @@ export interface Faq {
  * @type {Function}
  */
 const getOpenFaqItemsFromUrl = (slug: string): string[] => {
+  if (typeof window !== 'undefined') {
     // Use URLSearchParams to parse the query parameters from the current URL
     const searchParams = new URLSearchParams(window.location.search);
 
@@ -27,38 +29,19 @@ const getOpenFaqItemsFromUrl = (slug: string): string[] => {
     const openFaqItemsString = searchParams.get(`openFaqItems-${slug}`);
 
     // If the parameter exists, split it by commas into an array; otherwise, return an empty array
+    console.log(slug, openFaqItemsString ? openFaqItemsString.split(",") : []);
     return openFaqItemsString ? openFaqItemsString.split(",") : [];
+  }
 };
 
-export const FaqAccordion = ({
-  rows,
-  slug,
-}: { rows: Faq[]; slug: string }): JSX.Element => {
-  // Set the faq structured data
-  const faqStructuredData = {
-    "@context": "https://schema.org",
-    "@type": "FAQPage",
-    mainEntity: rows.map((row) => ({
-      "@type": "Question",
-      name: row.title,
-      acceptedAnswer: {
-        "@type": "Answer",
-        text: row.content,
-      },
-    })),
-  };
-
-  // Use the getOpenFaqItemsFromUrl function to set the
-  // initial state of preExpanded based on URL parameters
-  const [preExpanded, setPreExpanded] = React.useState<string[]>(
-    getOpenFaqItemsFromUrl(slug),
-  );
-
 /**
 * Updates query parameters in the url when items are opened
 * so that a link can be shared with the faq item already opened
 */
-  const handleChange = (openFaqItems: (string | number)[]): void => {
+const handleChange = (
+  openFaqItems: (string | number)[],
+  slug: string
+): void => {
   // Get current url params
   const searchParams = new URLSearchParams(window.location.search);
 
@@ -82,6 +65,37 @@ export const FaqAccordion = ({
   window.history.pushState({ path: newUrl }, "", newUrl);
 };
 
+/**
+ * We need to get the query params using docusaurus' router
+ * because `window` isn't available server side
+ * @return {[type]} [description]
+ */
+const useQuery = () => {
+  const { search } = useLocation();
+  return React.useMemo(() => new URLSearchParams(search), [search]);
+};
+
+export const FaqAccordion = ({
+  rows,
+  slug,
+}: { rows: Faq[]; slug: string }): JSX.Element => {
+  // Set the faq structured data
+  const faqStructuredData = {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    mainEntity: rows.map((row) => ({
+      "@type": "Question",
+      name: row.title,
+      acceptedAnswer: {
+        "@type": "Answer",
+        text: row.content,
+      },
+    })),
+  };
+
+  return (
+    <BrowserOnly fallback={<div>Loading FAQ's...</div>}>
+      {() => {
         return (
           <>
             <script
@@ -92,11 +106,13 @@ export const FaqAccordion = ({
             <Accordion
               allowMultipleExpanded={true}
               allowZeroExpanded={true}
-        onChange={handleChange}
-        preExpanded={preExpanded}
+              onChange={(itemUuids) => {
+                handleChange(itemUuids, slug)
+              }}
+              preExpanded={getOpenFaqItemsFromUrl(slug)}
             >
               {rows.map((row, index) => (
-          <AccordionItem>
+                <AccordionItem key={index}>
                   <AccordionItemHeading aria-level="2">
                     <AccordionItemButton>{row.title}</AccordionItemButton>
                   </AccordionItemHeading>
@@ -108,4 +124,7 @@ export const FaqAccordion = ({
             </Accordion>
           </>
         );
+      }}
+    </BrowserOnly>
+  );
 };