.map is returning only the last element of array React

Question

I'm creating a blog type app with cloud firestore just as a project to learn some stuff. However I'm having an issue where only the last element of my state array, 'blogs', is being returned inside of the .map method.

Any help with this is appreciated, thanks!

const [blogs, setBlog] = useState([]);
const fetchBlogs = async () => {
    const response = await getDocs(collection(db, "blog posts"));
    let postArray = [];
    response.docs.forEach((blogpost) => {
        postArray.push(blogpost.data());
    });
    console.log(postArray)
    postArray.forEach(post => {
        setBlog([...blogs, post]);
    });
}
useEffect(() => {
    fetchBlogs();
}, []);

return (
    <ul className="posts-container">
       { blogs.map((blog) => { 
           console.log(blog); //this outputs each of the individual posts, but only the last is displayed as an <li>
           return ( <li key={blog.title}>{blog.title}</li> )
        })}
    </ul>
)

Answer 1

You probably want to put the response in your state without doing the forEach()

setBlog(postArray);

Or even (depending on data structure)

const [blogs, setBlog] = useState([]);

const fetchBlogs = async () => {
    const response = await getDocs(collection(db, "blog posts"));
    setBlog(response.data); // set to whatever you need
}

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

return (
    <ul className="posts-container">
       { blogs.map((blog) => { 
            return <li>( <li key={blog.title}>{blog.title}</li> )
          }
       )}
    </ul>
);