[Tutorial w/TypeScript] Warning: 'ArticlesCell' return type 'Element[]' not a valid JSX element.

Working through the tutorial in TypeScript mode, VSCode complains about the ArticlesCell return type:

Interestingly, the warning doesn’t appear while the Success function still returns the Articles wrapped in <ul>, it only starts appearing when we change them to render as individual <article>s as advised at the end of https://redwoodjs.com/docs/tutorial/chapter2/cells#our-first-cell

However, wrapping <ArticlesCell /> in a fragment or a div in Homepage.tsx does not make the warning go away.

Compilation succeeds nevertheless so it’s possible to continue the tutorial, but still it would be nice to know which type to annotate the cell with so this warning goes away.

Reporting this non-critical finding here as advised.

[simoncrypta]

Typescript see success as an array of element (but I think it should be an array of component, but I don’t know if this really change something) which is not, like the error say, a valid JSX component. I wrap the map function inside a React fragment to fix this. Maybe we should have done this way in the tutorial, but I let @cannikin decide what he thinks about that.

// web/src/components/ArticlesCell/ArticlesCell.tsx

[...]

export const Success = ({ articles }: CellSuccessProps<ArticlesQuery>) => {
  return (
    <>
      {articles.map((article) => (
        <Article key={article.id} article={article} />
      ))}
    </>
  )
}

[Philzen]

I wrap the map function inside a React fragment to fix this. Maybe we should have done this way in the tutorial, but I let @cannikin decide what he thinks about that.

// web/src/components/ArticlesCell/ArticlesCell.tsx
export const Success = ({ articles }: CellSuccessProps<ArticlesQuery>) => {
  return (
    <>
      {articles.map((article) => (
        <Article key={article.id} article={article} />
      ))}
    </>
  )
}

Thanks, of course that is the obvious solution and makes the error go away 👍 … why didn’t i think of that – i did actually try React fragment around <ArticlesCell /> but of course that’s the same difference 🤦 😆

IMHO it should be done that way for the time being in chapter 2 so RedwoodJS learners are left with valid code until they get to chapter 5. I took the liberty to prepare #5020 for this.