25

Author: kossiecoder

src/components/Card.js

@@ -0,0 +1,11 @@
+const Card = ({ title }) => {
+  return (
+    <div className="card mb-3">
+      <div className="card-body">
+        {title}
+      </div>
+    </div>
+  );
+};
+
+export default Card;

src/pages/ListPage.js

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import { useState, useEffect } from 'react';
+import Card from '../components/Card';
 
 const ListPage = () => {
   const [posts, setPosts] = useState([]);
@@ -19,7 +20,12 @@ const ListPage = () => {
       <h1>Blogs</h1>
       {posts.map(post => {
         return (
-          <div key={post.id}>{post.title}</div>
+          <Card key={post.id} title={post.title} />
+          // <div class="card mb-3" key={post.id}>
+          //   <div class="card-body">
+          //     {post.title}
+          //   </div>
+          // </div>
         );
       })}
     </div>