Issue rendering list in React Component using API

Question

The code below is a component I am using to show the title of the posts based on what I get from the link. Everything with the API seems to work well, but I am not getting the list rendered for posts.forEach(post => <li id={post.id}> {post.title} </li>. Can anyone know how can I render the post title as a list from an array posts I get from an API? Thank You for helping, and let me know if you need more information.

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

const DataFetch = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/posts")
      .then((res) => {
        setPosts(res.data);
        console.log(posts[0].title);
      })
      .catch((err) => console.log(err));
  }, []);

  return <ul>
    {  posts.forEach(post => <li id={post.id}> {post.title} </li> )}
  </ul>
};

export default DataFetch;

Drew Reese · Accepted Answer · 2022-04-13 20:08:43Z

1

Array.prototype.forEach is a void return. You want to map the posts to JSX. Don't forget to also map a React key.

posts.map(post => (
  <li key={post.id} id={post.id}>
    {post.title}
  </li>
))

answered Apr 13, 2022 at 20:08

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue rendering list in React Component using API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related