React sample apps: useEffect hook, Axios api calls

1 files changed, 52 insertions, 0 deletions

diff --git a/react/06-api-calls/src/components/PostTable.jsx b/react/06-api-calls/src/components/PostTable.jsx
new file mode 100644
index 0000000..90e3589
--- /dev/null
+++ b/react/06-api-calls/src/components/PostTable.jsx
@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react'
+import api from '../services/api'
+
+const PostTable = () => {
+    const [posts, setPosts] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+
+    // Fetch data on component mount
+    useEffect(() => {
+        api
+            .get("/posts") // Replace with your actual API endpoint
+            .then((response) => {
+                setPosts(response.data);
+                setLoading(false);
+            })
+            .catch((err) => {
+                setError(err.message);
+                setLoading(false);
+            });
+    }, []);
+
+    if (loading) return <p>Loading posts...</p>;
+    if (error) return <p style={{ color: "red" }}>Error: {error}</p>;
+
+    return (
+        <div style={{ padding: "10px", fontFamily: "sans-serif" }}>
+            <h3>Latest posts</h3>
+
+            <table border="1" cellPadding="10" cellSpacing="0" style={{ width: "100%", textAlign: "left" }}>
+                <thead>
+                    <tr style={{ backgroundColor: "#f2f2f2" }}>
+                        <th>ID</th>
+                        <th>Title</th>
+                        <th>Author</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {posts.map((post) => (
+                        <tr key={post.id}>
+                            <td>{post.id}</td>
+                            <td>{post.title}</td>
+                            <td>{post.author}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+}
+
+export default PostTable
\ No newline at end of file