map not working on list
Answered
Black-whiskered Vireo posted this in #help-forum
Black-whiskered VireoOP
what am I doing wrong here?
Answered by B33fb0n3
yes and one thing that I forgot:
export default async function Home() {
const posts = await getAllPosts();
return (
<>
{
posts.map((post) =>
{
return <Post
id={post.id}
subject={post.subject}
comment={post.comment}
filePath={post.filePath}
/>
}
)
}
</>
);
}27 Replies
Black-whiskered VireoOP
I am getting data from prisma in the get all posts function, since its find many, its a list.. now I want to make multiple post components based on the post list
do it like this:
#.map((post) => {
return <Post {..your props..} />
}Black-whiskered VireoOP
#.map?
posts.map....Black-whiskered VireoOP
okk
export default async function Home() {
const posts = await getAllPosts();
return (
<>
posts.map((post) =>
{
return <Post
id={post.id}
subject={post.subject}
comment={post.comment}
filePath={post.filePath}
/>
}
)
</>
);
}sorry you have to spoon feed
but is it like this?
@B33fb0n3
yes and one thing that I forgot:
export default async function Home() {
const posts = await getAllPosts();
return (
<>
{
posts.map((post) =>
{
return <Post
id={post.id}
subject={post.subject}
comment={post.comment}
filePath={post.filePath}
/>
}
)
}
</>
);
}Answer
Black-whiskered VireoOP
missing key prop for element in iterator
there is a quick fix to disable react jsx key
give it a key then
with post.id
Black-whiskered VireoOP
this is my post component btw
key = post.id?
I can post code too
your
Post component needs to return something so you be able to use it as componnetyes but you also keep your id=post.id
and i think where you define your Post component it might be linter messing up
where you have return;
#Unknown Channel
</>
#Unknown Channel
</>
do instead
return ( #Unknown Channel </> )
Black-whiskered VireoOP
thank you all very much
I have a different question now, so ill ask it in a different post
happy to help