app/ui/guests/table.tsx

@@ -1,12 +1,15 @@
-import { Guest } from '@/app/lib/definitions';
+'use client';
+
 import clsx from 'clsx';
+import React, { useState, useEffect } from 'react';
+import { Guest } from '@/app/lib/definitions';	
 
-export default async function guestsTable() {
-
-  let guests: Guest[] = await fetch("http://localhost:3001/guests.json")
+export default function guestsTable() {
+  function loadGuests() {
+    fetch("http://localhost:3001/guests.json")
       .then((response) => response.json())
       .then((data) => {
-      return data.data.map((record: any) => {
+        setGuests(data.data.map((record: any) => {
           return ({
             id: record.id,
             name: record.attributes.name,
@@ -14,10 +17,15 @@ export default async function guestsTable() {
             group_name: record.attributes.group_name,
             status: record.attributes.status
           });
-      });
+        }));
       }, (error) => {
         return [];
       });
+  }
+
+  const [guests, setGuests] = useState<Array<Guest>>([]);
+
+  guests.length === 0 && loadGuests();
 
   return (
     <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">