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>
);
}
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?
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.