Fix: If there's no posts show a message

Planet-NULLCAST · Jun 25, 2021 · a4225a1 · a4225a1
1 parent 988ccce
commit a4225a1
Showing 1 changed file with 28 additions and 24 deletions.
diff --git a/component/layout/BlogPost/SectionRelated.jsx b/component/layout/BlogPost/SectionRelated.jsx
@@ -4,7 +4,7 @@ import AuthorDetails from "../BlogListing/AuthorDetails";
 import moment from "moment";
 
 export default function SectionRelated({ title, posts }) {
-  // console.log({ posts });
+  // console.log(posts.length);
   return (
     <section className={`${styles.section} py-10 lg:py-20`}>
       <div className="container">
@@ -19,33 +19,37 @@ export default function SectionRelated({ title, posts }) {
           </span>
         </div>
         <div className={styles.relatedList}>
-          {posts.map((post) => (
-            <div className={styles.relatedItem} key={post._id}>
-              <figure>
-                <Link href={`/${post.slug}`}>
-                  <a>
-                    <img src={`${post.bannerImage}`} alt={`${post.title}`} />
-                  </a>
-                </Link>
-              </figure>
-              <div className={styles.text}>
-                <p className={styles.date}>
-                  {moment(post.publishedAt).format("MMMM Do, YYYY")}
-                </p>
-                <h3>
+          {posts.length > 0 ? (
+            posts.map((post) => (
+              <div className={styles.relatedItem} key={post._id}>
+                <figure>
                   <Link href={`/${post.slug}`}>
-                    <a className="linkUnderline">
-                      {/* 34 */}
-                      {post.title.length > 34
-                        ? post.title.substring(0, 34) + "..."
-                        : post.title}
+                    <a>
+                      <img src={`${post.bannerImage}`} alt={`${post.title}`} />
                     </a>
                   </Link>
-                </h3>
-                <AuthorDetails username={post.primaryAuthor.username} />
+                </figure>
+                <div className={styles.text}>
+                  <p className={styles.date}>
+                    {moment(post.publishedAt).format("MMMM Do, YYYY")}
+                  </p>
+                  <h3>
+                    <Link href={`/${post.slug}`}>
+                      <a className="linkUnderline">
+                        {/* 34 */}
+                        {post.title.length > 34
+                          ? post.title.substring(0, 34) + "..."
+                          : post.title}
+                      </a>
+                    </Link>
+                  </h3>
+                  <AuthorDetails username={post.primaryAuthor.username} />
+                </div>
               </div>
-            </div>
-          ))}
+            ))
+          ) : (
+            <div>No blogs!</div>
+          )}
         </div>
       </div>
     </section>