Problem using map method with react (posts.map is not a function)

i’m having an error while trying to map an array (code below). The error i’m receiving is : Uncaught (in promise) TypeError: posts.map is not a function. I have compared it to one of my old project, and it worked perfectly on the older one. Thanks in advance

const MainContent = () => {
  
  const openModal = () => {
    const modal = document.querySelector(".modal");
    modal.style.display = "block";
  };

  const [posts, setPosts] = useState([]);
  const getPosts = async () => {
    const response = await fetch('http://localhost:5000/api/post/');
    const posts = await response.json();
    setPosts(posts);
    console.log(posts)
  }

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

  return (
    <section className="main-content-section">
      <button className="button post-btn" onClick={openModal}>
        Créer un nouveau post
      </button>
      <ModalPost style={{ display: "none" }} />
      <div className="post-container">
        {posts.map((post) => {
          const { id, title, content, author } = post;
          return (
            <div className="post-content" key={id}>
              <div className="post-content__user-info">
                <div className="post-content__photo-container">
                   
                </div>
                <div className="post-content__name">
                  <h3>{author}</h3>
                </div>
              </div>
              <div className="post-content__content">
                <h3>{title}</h3>
                <p>{content}</p>
              </div>
              <div className="post-content__like-box">
                <BiHeart className="like-heart like" size={26} />
                <RiDislikeLine className="dislike-heart dislike" size={26} />
              </div>
            </div>
          );
        })} 
      </div>

    </section>
  );
};

Answer

Just add if statement before mapping post array. The reason is that posts array does not get data immediately causing map function to fail. if condition will wait until posts array actually contains data

{
   (posts && posts.length > 0) ?
       (posts.map((post) => {})
       : (<p> loading... </p>)
}