useEffect causing .map() error when sending post request - reactjs

Question

When I try adding a new post I get this error. But when I console.log({ newPost }) I see that the new obj gets added. Something is happening when I try setting it in setPost({ newPost }).
import React, { useState, useEffect } from "react"
import axios from "axios"
const Users = () => {
const [posts, setPosts] = useState([])
useEffect(() => {
const getPosts = async () => {
const { data: post } = await axios.get(
"https://jsonplaceholder.typicode.com/posts"
)
setPosts(post)
}
getPosts()
}, [])
const handlePost = async () => {
const obj = {
title: "foo",
body: "bar",
userId: 1,
}
const { data: post } = await axios.post(
"https://jsonplaceholder.typicode.com/posts",
obj
)
const newPost = [post, ...posts]
setPosts({ newPost })
}
return (
<div>
<h1>List of all Posts</h1>
<button onClick={() => handlePost()}>Post new title</button>
<ul className="list-group list-group-flush">
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
)
}
export default Users

Answer 1

The error is that you are calling setPosts with an object when you mean it to be an array.
Replace
setPosts({ newPost })
With
setPosts( newPost )
This part doesn't really matter, but I would say that when dealing with async methods it's a better practice to setState with a function of the previousState rather than accessing the previous state directly.
setPosts((posts) => [post, ...posts])

Answer 2

posts state variable is expected to be an Array, so there's no need to set it inside an object. Change setPosts({ newPost }) to setPosts(newPost). It should work.

Answer 3

I run the code with the error in my pc so there are some errors.
But I changed setPosts(newPost).
So it is working very well.
If we avoid these errors, we should be familiar with React Hooks