React.js: posts.map is not a function - reactjs

Question

I'm getting this error when running my app and i don't know why!
i have this react component that's getting data from a djagno api that's consists of a title, body for the post, slug, image, date (day and month) and a category.
i have defined posts as an array but it's still giving me an error that's posts.map is not a function.
edit:i found out that the problem maybe cuz the data i'm getting from the api (res.data) which i console logged is an object that has the arrys i want to render
i hope someone can help me with this on cuz i have spent 3 days trying to figure out what's wrong with this code
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom'
const Post = () => {
const [posts, setPost] = useState([]);
useEffect(() => {
const fetchPost = async () => {
try {
const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/post/`);
setPost(res.data);
console.log('data', res.data);
}
catch (err) {
}
}
fetchPost();
}, []);
const capitalizeFirstLetter = (word) => {
if (word)
return word.charAt(0).toUpperCase() + word.slice(1);
return '';
};
const getPost = () => {
let list = [];
let result = [];
posts.map(blogPost => {
return list.push(
<div className="row no-gutters border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
<div className="col p-4 d-flex flex-column position-static">
<strong className="d-inline-block mb-2 text-primary">{capitalizeFirstLetter(blogPost.komite)}</strong>
<h3 className="mb-0">{blogPost.overskrift}</h3>
<div className="mb-1 text-muted">{blogPost.måned} {blogPost.dag}</div>
<Link to={`/post/${blogPost.slug}`} className="stretched-link">Les mer...</Link>
</div>
<div className="col-auto d-none d-lg-block">
<img width='200' height='250' src={blogPost.bilde} alt='bilde' />
</div>
</div>
);
});
for (let i = 0; i < list.length; i += 2) {
result.push(
<div key={i} className='row mb-2'>
<div className='col-md-6'>
{list[i]}
</div>
<div className='col-md-6'>
{list[i+1] ? list[i+1] : null}
</div>
</div>
)
}
return result;
};
return (
<div className='container mt-3'>
<div className="nav-scroller py-1 mb-2">
<nav className="nav d-flex justify-content-between">
<Link className="p-2 text-muted" to='/komite/aktulet'>Aktulet</Link>
<Link className="p-2 text-muted" to='/komite/upop'>Upop</Link>
<Link className="p-2 text-muted" to='/komite/musikk'>Musikk</Link>
<Link className="p-2 text-muted" to='/komite/fest'>Fest</Link>
<Link className="p-2 text-muted" to='/komite/kultur'>Kultur</Link>
<Link className="p-2 text-muted" to='/komite/debatt'>Debatt</Link>
<Link className="p-2 text-muted" to='/komite/okonomi'>Økonomi</Link>
<Link className="p-2 text-muted" to='/komite/pr'>PR</Link>
</nav>
</div>
{getPost()}
</div>
);
};
export default Post;

Answer 1

I didn't have a chance to test, but I think you may be getting this because there is no guarantee that the posts state has data when the rendering happens. You are calling the API but the rendering happens before the data is available.
One suggestion for loading data from an API like this is to use a loading/isLoaded state as well, and render conditionally to avoid these errors:
const [isLoaded, setIsLoaded] = useState(false);
And then when you get the data from the API:
setIsLoaded(true);
Finally, in your rendering code:
if ( isLoaded ) {
return ...
} else {
return null
}

Answer 2

posts should be accessed from setPost, which is what you're declaring in your hook.
You're currently calling it from getPost, which shouldn't be able to access posts.
I might be wrong as I'm new to hooks, but I think that's why it's not working.