Theo's Typesafe Cult•2y ago

React is saying a function can not be passed as a child

Hello, I am trying to render a list of components on one of my pages, however when doing so I am getting the following error:

Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

Any idea why this could be? Thanks for the help!

<div className="w-full h-full pt-[600px] max-w-[1000px] mx-auto grid grid-cols-3">
    {() => {
    let sponsorCards = [];
    for (const sponsor of props.sponsors) {
      console.log('Sponsor Data: ', sponsor);
      sponsorCards.push(<SponsorCard {...sponsor} />);
    }
    return sponsorCards;
    }}
</div>

<div className="w-full h-full pt-[600px] max-w-[1000px] mx-auto grid grid-cols-3">
    {() => {
    let sponsorCards = [];
    for (const sponsor of props.sponsors) {
      console.log('Sponsor Data: ', sponsor);
      sponsorCards.push(<SponsorCard {...sponsor} />);
    }
    return sponsorCards;
    }}
</div>