For some reason my content within an array is not printing out to the screen-CodePudding

I am currently following a tutorial on PERN stack and whenever I try to print out the contents of an array to the screen to be under title and content, nothing prints out.

Here is my code where the error relies somewhere within:

import React, { Fragment, useState, useEffect } from "react";

const ListBlog = () => {
  const [blogs, setBlogs] = useState([]);

  const getBlogs = async () => {
    const res = await fetch('http://localhost:5000/blog');

    const blogArray = await res.json();

    setBlogs(blogArray)
  }

  useEffect(() => {
    getBlogs();
  }, [])

  console.log(blogs)
  return <Fragment>
    {" "}
    <table className="table mt-5">
    <thead>
      <tr>
        <th>Title</th>
        <th>Content</th>
        <th>Edit</th>
        <th>Delete</th>
      </tr>
    </thead>
    <tbody>
    {/* <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
</tr>*/}
     {
       blogs.map(blog => {
         <tr>
           <td>
             {blog.title}
           </td>
           <td>{blog.content}</td>
           <td>Edit</td>
           <td>Delete</td>
         </tr>
       })
     }
    </tbody>
  </table>
  </Fragment>
}

export default ListBlog;

I believe the state is causing errors as it is printing out the following:

(2) [{…}, {…}]0: {post_id: 1, title: 'hi', content: 'howdy'}1: {post_id: 11, title: 'eat', content: 'yogurt'}length: 2[[Prototype]]: Array(0)
[object Object],[object Object]

I just want to print out the array but for some reason [Object object] is printing out as well which may be causing my contents not to print to my localhost page.

Here is what my page looks like when I try to have my contents within the array print underneath title, content, Edit, and Delete but nothing gets displayed...

CodePudding user response：

this happens because you forget to return in bolgs.map

 {
       blogs.map(blog => {
         return (<tr>
           <td>
             {blog.title}
           </td>
           <td>{blog.content}</td>
           <td>Edit</td>
           <td>Delete</td>
         </tr>)
       })
     }

 {
       blogs.map(blog => (
         <tr>
           <td>
             {blog.title}
           </td>
           <td>{blog.content}</td>
           <td>Edit</td>
           <td>Delete</td>
         </tr>
       ))
     }

CodePudding user response：

Change curly brackets with normal pharantesis in map

{
       blogs.map(blog => (
         <tr>
           <td>
             {blog.title}
           </td>
           <td>{blog.content}</td>
           <td>Edit</td>
           <td>Delete</td>
         </tr>
       ))
     }

CodePudding user response：

You forgot to return in map

{
   blogs.map(blog => {
     <tr>
       <td>
         {blog.title}
       </td>
       <td>{blog.content}</td>
       <td>Edit</td>
       <td>Delete</td>
     </tr>
   })
}

You can write either this

{
   blogs.map(blog => {
     return <tr>
       <td>
         {blog.title}
       </td>
       <td>{blog.content}</td>
       <td>Edit</td>
       <td>Delete</td>
     </tr>
   })
}

or this

{
  blogs.map(blog => ( 
   <tr>
     <td>
       {blog.title}
     </td>
     <td>{blog.content}</td>
     <td>Edit</td>
     <td>Delete</td>
    </tr>
   ))
 }