react.dev/tips/05-maximum-number-of-jsx-ro...

---
id: maximum-number-of-jsx-root-nodes
title: Maximum Number of JSX Root Nodes
layout: tips
permalink: tips/maximum-number-of-jsx-root-nodes.html
prev: self-closing-tag.html
next: style-props-value-px.html
---

Currently, in a component's `render`, you can only return one node; if you have, say, a list of `div`s to return, you must wrap your components within a `div`, `span` or any other component.

Don't forget that JSX compiles into regular JS; returning two functions doesn't really make syntactic sense. Likewise, don't put more than one child in a ternary.
entry on returning only one node from `render` 11 years ago			`---`
fix title case for docs tips everywhere 11 years ago			`id: maximum-number-of-jsx-root-nodes`
title case for entry titles; fix two entry names 11 years ago			`title: Maximum Number of JSX Root Nodes`
Renamed Cookbook references to tips. Reworded intro (sounded weird because it still referenced cookbooks. Updated some entry ID's (some side nav links didn't match entry permalinks) 11 years ago			`layout: tips`
Upgrade to Jekyll 3 Full list of changes is at https://jekyllrb.com/docs/upgrading/2-to-3/. The tl;dr of it is: - Relative permalinks were removed, so all the files in the `docs` subdirectory need their permalink to be prefixed with `docs/` - `post` and `page` types were renamed to `posts` and `pages` respectively - `jekyll-paginate`, `pygments` and `redcarpet` are all now optional, so I needed to explicitly add it to the Gemfile. Jekyll now uses `rouge` rather than `pygments` for syntax highlighting, but rouge does not support highlighting individual lines (`hl_lines`) so we need to continue using Pygments. - Layout metadata (eg. `sectionid`) is now on a `layout` variable rather than `page` Tested the following pages and confirmed that they all work: - "Docs" link (getting started page): http://127.0.0.1:4000/react/docs/getting-started.html - Downloads: http://127.0.0.1:4000/react/downloads.html - Tutorial: http://127.0.0.1:4000/react/docs/tutorial.html - A few pages under the "docs" subdirectory, to confirm they're working properly: - http://127.0.0.1:4000/react/docs/addons.html - http://127.0.0.1:4000/react/docs/why-react.html - http://127.0.0.1:4000/react/docs/create-fragment.html - A few tips: - http://127.0.0.1:4000/react/tips/false-in-jsx.html - http://127.0.0.1:4000/react/tips/style-props-value-px.html - Non-English versions of the page: - http://127.0.0.1:4000/react/docs/getting-started-it-IT.html - http://127.0.0.1:4000/react/docs/getting-started-ja-JP.html 9 years ago			`permalink: tips/maximum-number-of-jsx-root-nodes.html`
added seperate cookbook layout (since URL base of next/prev is hardcoded in layout), added next/prev yaml meta to each cookbook entry until I can find a way of generating them dynamically 11 years ago			`prev: self-closing-tag.html`
title case for entry titles; fix two entry names 11 years ago			`next: style-props-value-px.html`
entry on returning only one node from `render` 11 years ago			`---`

Removed Q&A format 11 years ago			Currently, in a component's `render`, you can only return one node; if you have, say, a list of `div`s to return, you must wrap your components within a `div`, `span` or any other component.
entry on returning only one node from `render` 11 years ago
Update 05-maximum-number-of-jsx-root-nodes.md 10 years ago			`Don't forget that JSX compiles into regular JS; returning two functions doesn't really make syntactic sense. Likewise, don't put more than one child in a ternary.`