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>
</>
);
}
Your prop posts is undefined. Check what value you pass to the component and make sure this is an array.
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>
</>
);
}