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

[Philzen]

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.

[Philzen]

Suggestion: enhance the tutorial code snippets with a TypeScript tab so that first-timers can also learn about the correct types while working through it.

[Philzen]

@simoncrypta I've created a repository that follows each of the steps for your convenience, you can checkout / reset to Philzen/redwoodblog-tutorial-typescript@2acdd84 and play that through yourself.

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

[simoncrypta]

Also, the error will be fixed later in the tutorial

export const Success = ({ articles }) => {
  return (
    <div className="space-y-10">
      {articles.map((article) => (
        <Article article={article} key={article.id} />
      ))}
    </div>
  )
}

[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.