I'm sending an array of items to a childcomponent (FeedItems), which should map through and show a list, but I'm not getting anything even though I followed the interwebs. I believe I'm doing something wrong with the mapping through the array but I can't seem to find what exactly.
Feed.tsx
export default function Feed(){
const posts = [
{
title: "Wij zoeken een docent voor 2 weken",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et erat nec mi viverra fermentum eget sit amet libero. " +
"Cras bibendum at dui nec rutrum. Suspendisse lobortis urna libero, eget suscipit mauris interdum vel. " +
"Sed vestibulum, neque eget consectetur suscipit, leo justo imperdiet sem, eget blandit sapien felis a libero.",
user: "Eindhoven DansVereniging"
},
{
title: "Wij zoeken een docent voor 5 dagen",
body: "Praesent pharetra, felis sed vestibulum facilisis, tortor erat luctus odio, eget tempor ex nisl ut lacus. " +
"Etiam sem metus, convallis eget mattis in, cursus sed lorem. Aliquam erat volutpat. Duis vestibulum velit venenatis lacinia lacinia. " +
"Curabitur pellentesque pretium libero non feugiat. Maecenas rhoncus arcu a vestibulum tincidunt. " +
"Duis quis justo eget dui aliquam lobortis. Ut pretium tortor eu orci pulvinar tempus.",
user: "Dance Academy"
}
];
const page = useTypedPage();
return(
<div className="flex ssm:flex-col md:flex-row">
<div className="basis-1/4 bg-red-200 flex flex-col">
<div className="mt-5 m-auto">
<h2>{page.props.user.name}</h2>
</div>
</div>
<div className="flex flex-col bg-indigo-50 ml-12 w-auto">
<FeedItems items={posts}/>
</div>
</div>
);
}
FeedItems.tsx
export default function FeedItems(props: {items: any[]}){
console.log(props.items);
return(
<>
{
props.items.map((item: any) => {
<h2>{item.body}</h2>
})
}
</>
);
}