How to parse through an object in an array to display API data

Hello. I’m trying to display some data from an API that I created onto my front-end. Right now I’m seeing the data appear in the console, but I can’t get it to display. I think what the issue is is that I’m not parsing even more deep if that makes sense. Here is my code

import { useState, useEffect } from "react";
import { fetchPosts } from "../../api/index";
import Post from "./Post/post.js";

export default function Posts() {
 const [posts, setPosts] = useState({});

 useEffect(() => {
   const getData = async () => {
     const response = await fetchPosts();
     const data = response.data;
     console.log(data);
     setPosts(data);
   };
   getData();
 }, []);
 return (
   <div>
     <h1>{posts.title}</h1>
   </div>
 );
}

And this is what my console looks like

Array(20) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

​

0: Object { likeCount: 0, createdAt: "2021-07-02T00:51:46.496Z", _id: "60de656a3d69822301284a90", … }

​​

__v: 0

​​

_id: "60de656a3d69822301284a90"

​​

createdAt: "2021-07-02T00:51:46.496Z"

​​

likeCount: 0

​​

message: "Hello world"

​​

tags: Array []

​​

title: "July 1st test"
​

If I understand, posts is an array of objects. So this:

<h1>{posts.title}</h1>

isn’t going to work because the array posts doesn’t have a property “title”. If you did:

<h1>{posts[0].title}</h1>

then you could at least see the first one. You could also do something like:

   <div>
    {
       posts.map(post => <h1 key={post.title}>{post.title}</h1>)
    }
   </div>

That should work. I’m just doing it from memory, but the idea is there.

Thank you! I always forget to include the key each time

Hey there! I’m running into basically the same issue again where this time I’m using the same solution as I did last time and it’s console logging the data, but still not displaying the desired items. I even put a key on the h1 element but still not getting anything. Am I missing something?

import { useState, useEffect } from "react";
import { fetchTopics } from "../../api/topics";
import { Grid } from "@material-ui/core";

import styles from "../Posts/Posts.module.css";

export default function Topics() {
  const [topics, setTopics] = useState([]);
  useEffect(() => {
    const getTopicData = async () => {
      const response = await fetchTopics();
      const data = response.data;
      setTopics(data);
      console.log(data);
    };
    getTopicData();
  }, []);

  return (
    <div>
      {topics.map(topic => {
        <h1 key={topic._id}>{topic.title}</h1>;
      })}
    </div>
  );
}

Console:

Array(3) [ {…}, {…}, {…} ]
​
0: Object { createdAt: "2021-08-04T17:48:17.985Z", _id: "610ad323aaee0f9dadcd84b4", title: "Testing on REST again", … }
​
1: Object { createdAt: "2021-08-04T17:49:56.741Z", _id: "610ad348373b619e7afa2f49", title: "Testing on REST again", … }
​
2: Object { createdAt: "2021-08-07T22:35:05.514Z", _id: "61102197c32528e87b6b7dab", title: "This is test", … }
​
length: 3

Do some trouble shooting. Try something like:

  console.log('topics', topics);
  return (
    <div>
      {topics.map(topic => console.log('topic', topic))}
    </div>
  );

See what that tells you. Device a new test, see what that says. Figure out where what you expect to happen isn’t happening. Then you’ve found your issue.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.