{posts.map((post) => { // Open new scope
// Nothing being returned here
<PostList
id={post.id}
key={post.id}
username={post?.data?.username}
profileImage={post?.data?.profileImage}
postImage={post?.data?.postImage}
description={post?.data?.description}
/>;
})}
You can solve this in two ways
1: directly returning the <PostList> with an implicit return
{posts.map((post) => { // Open new scope
// We can do stuff here
// Like a console.log(post)
return ( // Explicit return
<PostList
id={post.id}
key={post.id}
username={post?.data?.username}
profileImage={post?.data?.profileImage}
postImage={post?.data?.postImage}
description={post?.data?.description}
/>
)
})}
The map function requires a return statement inside the curly braces {}. In your case, you’re using curly braces instead of parentheses (). You should replace the curly braces with parentheses to properly return the PostList component from the map function. This is the corrected code:-
3
Answers
Your
.map
function is notreturn
ing anythingYou can solve this in two ways
1: directly returning the
<PostList>
with an implicit returnor 2. using an explicit
return
what is your problem exactly? The codes looks good the change I think you made in your code is to return the component inside the map like this
The map function requires a return statement inside the curly braces {}. In your case, you’re using curly braces instead of parentheses (). You should replace the curly braces with parentheses to properly return the PostList component from the map function. This is the corrected code:-