An error comes when mapping array of objects in React - reactjs

Question

I try to get data from the backend and display that data in the frontend. This is the code that I wrote to do this task.
function ViewPost() {
const { id } = useParams();
console.log(id);
const [posts, setPosts] = useState({});
useEffect(()=>{
getOnePost();
}, []);
useEffect(()=>{
if (posts && posts.location) {
console.log(posts.location);
console.log(posts.location.longitude);
console.log(posts.location.latitude);
}
}, [posts]);
const getOnePost = async () => {
try {
const response = await axios.get(`/buyerGetOnePost/${id}`)
console.log(response);
const allPost=response.data.onePost;
setPosts(allPost);
} catch (error) {
console.error(`Error: ${error}`)
}
}
console.log(posts);
console.log(posts.wasteItemList);
return(
<div className="posts-b">
<div className="posts__container-b">
<h1>Post Details</h1>
<main className="grid-b">
{posts.wasteItemList.map((notes,index)=>(
<article>
<div className="text-b">
<h3>Post ID: {index+1}</h3>
<p>Waste Item: Polythene Roll</p>
<p>Quantity: 1 kg</p>
</div>
</article>
))}
</main>
</div>
</div>
);
}
export default ViewPost;
When I console.log(posts) it shows post data successfully. The wasteItemList is an array it has two objects.
When I console.log(posts.wasteItemList) it also shows the two array of objects successfully.
But the problems comes when I try to map wasteItemList. I tried to map using thisposts.wasteItemList.map. But I get an error 'TypeError: Cannot read property 'map' of undefined'. How do I solve this issue?

Answer 1

This happens because the data is not available immediately so, for a while posts.wasteItemList is undefined.
Whenever accessing wasteItemList you should use
posts && posts.wasteItemList && posts.wasteItemList.map(()=> *)
This gives you the complete safety.
If you are using TypeScript or node version >= 14, then you can use optional chaining.
posts?.wasteItemList?.map(()=>{})
Which is basically the same thing just more syntactically pleasing.

Answer 2

Change this particular line
{posts.wasteItemList.map((notes,index)=>
to
{posts.wasteItemList && posts.wasteItemList.map((notes,index)=>

Answer 3

The initial value of posts is {}, so there is no wasteItemList property on posts.
Attempting to access posts.wasteItemList would return undefined and you cannot map over undefined.
Try using optional chaining on posts?.wasteItemList?.map
return(
<div className="posts-b">
<div className="posts__container-b">
<h1>Post Details</h1>
<main className="grid-b">
{posts?.wasteItemList?.map((notes,index)=>(
<article>
<div className="text-b">
<h3>Post ID: {index+1}</h3>
<p>Waste Item: Polythene Roll</p>
<p>Quantity: 1 kg</p>
</div>
</article>
))}
</main>
</div>
</div>
);