My jsx is not populating when I used useEffect and useState

April 8, 2022

my file code where I am populating the code

import React, { useEffect, useState } from "react";
import blogStyle from "../styles/Blog.module.css";
import Link from "next/link";

function blog() {
  const [blogs, setBlogs] = useState([]);
  useEffect(() => {
    fetch("http://localhost:3000/api/allBlogs")
      .then((parsingData) => {
        return parsingData.json();
      })
      .then((data) => {
        setBlogs(data);
        console.log(data);
      });
  }, []);

  return (
    <>
      <div className={blogStyle.blog}>
        {blogs.map((blogItem) => {
          <div className={blogStyle.blogItemTemplate} key={blogItem.title}>
            <Link href={`/blogPost/how-to-learn-js`}>
              <h2 className={blogStyle.blogItemHeading}>{blogItem.title}</h2>
            </Link>
            <p className={blogStyle.blogItemPara}>{blogItem.content}</p>
            <div className={blogStyle.blogItemPara}>{blogItem.writer}</div>
          </div>;
        })}
      </div>
    </>
  );
}

what I am getting in my localhost
image here

Everything works fine no error in the console and I got the fetched data. I stored the fetched data in blogs using useState which is successful but when i use the blogs in jsx to populate data nothing shows up . Using map function I got the title and description when I console logged it but not showing in the localhost

>Solution :

write the jsx code in return statement like
blogs.map((blogItem) => {return (...your jsx code)}), otherwise try this blogs.map((blogItem) => (...your jsx code.)).