My jsx is not populating when I used useEffect and useState

Question

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

score 1 · Accepted Answer · answered Apr 08 '22 at 06:19

1

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

answered Apr 08 '22 at 06:19

Arik Patel

26
3

without return how parenthesis works and curly braces don't please tell??????????? – Veer-Khatri Apr 08 '22 at 06:29
jsx should be always in return statement in functions.If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword. example `() => (
hello
)` – Arik Patel Apr 11 '22 at 10:38

sandrooco · Answer 2 · 2022-04-08T07:46:16.163

0

I'm quite certain that you have some extra braces, try this instead:

{blogs.map((blogItem) => ( // <-- see here
    <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>
))} // <-- and here

edited Apr 08 '22 at 07:46

answered Apr 08 '22 at 06:11

sandrooco

8,016
9
48
86

1

))} <--this must be last brackets – Veer-Khatri Apr 08 '22 at 06:19
after this edit, your code works but how please tell me I just used the map function as arrow function and you changed the curly braces to parenthesis and it works how ??? Even my youtube tutor also placed curly braces – Veer-Khatri Apr 08 '22 at 06:21
I just updated it @Veer-Khatri. If you use `{}` it represents a block. You would need to use `return` inside of it. Using `=> (...)` directly returns the content / is a shorthand for the verbose `return`. – sandrooco Apr 08 '22 at 07:49

My jsx is not populating when I used useEffect and useState

2 Answers2