Wrap rendered <article>s in React fragment

This avoids warning `'ArticlesCell' cannot be used as a JSX component. Its return type 'Element[]' is not a valid JSX element.`. Closes redwoodjs#5008
Philzen · Apr 4, 2022 · 947d3c8 · 947d3c8
1 parent 2ffbe2d
commit 947d3c8
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 25 deletions.
diff --git a/docs/docs/tutorial/chapter2/cells.md b/docs/docs/tutorial/chapter2/cells.md
@@ -272,15 +272,19 @@ Now we're in the realm of good ol' React components, so just build out the `Succ
 
 ```jsx {2-10} title="web/src/components/ArticlesCell/ArticlesCell.js"
 export const Success = ({ articles }) => {
-  return articles.map((article) => (
-    <article key={article.id}>
-      <header>
-        <h2>{article.title}</h2>
-      </header>
-      <p>{article.body}</p>
-      <div>Posted at: {article.createdAt}</div>
-    </article>
-  ))
+  return (
+    <>
+      {articles.map((article) => (
+        <article key={article.id}>
+          <header>
+            <h2>{article.title}</h2>
+          </header>
+          <p>{article.body}</p>
+          <div>Posted at: {article.createdAt}</div>
+        </article>
+      ))}
+    </>
+  )
 }
 ```
 

diff --git a/docs/docs/tutorial/chapter2/routing-params.md b/docs/docs/tutorial/chapter2/routing-params.md
@@ -15,18 +15,22 @@ import { Link, routes } from '@redwoodjs/router'
 // QUERY, Loading, Empty and Failure definitions...
 
 export const Success = ({ articles }) => {
-  return articles.map((article) => (
-    <article key={article.id}>
-      <header>
-        <h2>
-          // highlight-next-line
-          <Link to={routes.article()}>{article.title}</Link>
-        </h2>
-      </header>
-      <p>{article.body}</p>
-      <div>Posted at: {article.createdAt}</div>
-    </article>
-  ))
+  return (
+    <>
+      {articles.map((article) => (
+        <article key={article.id}>
+          <header>
+            <h2>
+              // highlight-next-line
+              <Link to={routes.article()}>{article.title}</Link>
+            </h2>
+          </header>
+          <p>{article.body}</p>
+          <div>Posted at: {article.createdAt}</div>
+        </article>
+      ))}
+    </>
+  )
 }
 ```
 
@@ -306,10 +310,14 @@ export const Failure = ({ error }) => (
 )
 
 export const Success = ({ articles }) => {
-  return articles.map((article) => (
-    // highlight-next-line
-    <Article key={article.id} article={article} />
-  ))
+  return (
+    <>
+      {articles.map((article) => (
+        // highlight-next-line
+        <Article key={article.id} article={article} />
+      ))}
+    </>
+  )
 }
 ```