This is one of my components in the project named Posts.jsx which displays all the posts received from a component, but as soon as I render the component the page goes blank showing :

Uncaught TypeError: Cannot read properties of undefined (reading 'map'). 

Even if I write posts?. maps... it doesn't work. Please help me with this.

import Post from "../post/Post";
import "./posts.css";

export default function Posts({posts}) {
  return (
    <>
      <div className="posts">
          
          {posts.map((p) =>{
            {console.log(p)}
            <Post post = {p} />
          })}
      </div>
    </>
    
  );
}

CodePudding user response：

Your prop posts is undefined. Check what value you pass to the component and make sure this is an array.

CodePudding user response：

The problem is that you imported Post with a capital P and you are trying to map post with a small p Use this code to correct it

import Post from "../post/Post";
import "./posts.css";

export default function Posts({posts}) {
  return (
    <>
      <div className="posts">
          
          {Posts.map((p) =>{
            {console.log(p)}
            <Post post = {p} />
          })}
      </div>
    </>
    
  );
}