Estoy enviando una serie de elementos a un componente secundario (FeedItems), que debería mapear y mostrar una lista, pero no obtengo nada a pesar de que seguí las interwebs. Creo que estoy haciendo algo mal con el mapeo a través de la matriz, pero parece que no puedo encontrar exactamente qué.

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> }) } </> ); }