better usage of issues/all data

src/Home.tsx

@@ -1,29 +1,40 @@
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 
+function Issue({ issue }: { issue: any }) {
+    return (
+        <div className="w-sm p-4 border">
+            [{issue.id}] {issue.title}
+        </div>
+    );
+}
+
 function Home() {
     const [issues, setIssues] = useState([]);
     const [serverURL, setServerURL] = useState("http://localhost:3000");
 
     async function getIssues() {
         const res = await fetch(`${serverURL}/issues/all`);
+        const data = await res.json();
+        setIssues(data);
     }
 
     return (
         <main className="w-full h-[100vh] flex flex-col items-center justify-center gap-4 p-4">
             <h1>Issue Project Manager</h1>
-
             <Button onClick={getIssues} className={""}>
-                get issues
+                {issues.length > 0 ? "re-fetch issues" : "fetch issues"}
             </Button>
 
-            <div>Issues count: {issues.length}</div>
             {issues.length > 0 && (
-                <ul>
+                <>
                     {issues.map((issue: any) => (
-                        <li key={issue.id}>{issue.title}</li>
+                        <Issue key={issue.id} issue={issue} />
                     ))}
-                </ul>
+                    <pre className="w-2xl max-h-96 overflow-auto p-4 border bg-">
+                        {JSON.stringify(issues, null, 2)}
+                    </pre>
+                </>
             )}
         </main>
     );