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

JavaScript
1

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"
​
2

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.

3

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

4

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
5

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.