When writing JSX in React, there’s one caveat: you must return one parent item. Not more than one.

For example, this is not possible:

const Pets = () => {
  return (
    <Dog />
    <Cat />
  )
}

One “classic” way to solve this is to wrap components and other HTML elements in a div:

const Pets = () => {
  return (
    <div>
      <Dog />
      <Cat />
    </div>
  )
}

However, this introduces a problem—there’s an HTML element that was introduced just to make our JSX work and isn’t necessary in the resulting HTML, but that’s the downside.

One solution is to return an array of JSX elements:

const Pets = () => {
  return [
      <Dog />,
      <Cat />
  ]
}

Another solution is to use Fragment, a relatively new React feature that solves the problem for us:

const Pets = () => {
  return (
    <Fragment>
      <Dog />
      <Cat />
    </Fragment>
  )
}

It works like the div element we added before, but it’s not going to appear in the resulting HTML rendered to the browser. Win-win.

Lessons in this unit:

0:	Introduction
1:	Setting up a React project with Vite
2:	React Components
3:	Introduction to JSX
4:	Using JSX to compose UI
5:	The difference between JSX and HTML
6:	Embedding JavaScript in JSX
7:	Handling user events
8:	Install the React Developer Tools
9:	Getting started with JSX
10:	▶︎ How to return multiple elements in JSX
11:	How to learn React
12:	Should you use jQuery or React?
13:	React concepts: declarative
14:	The Virtual DOM
15:	The roadmap to learn React
16:	What’s new in React 19
17:	How to install React
18:	The React Fragment
19:	React, how to transfer props to child components
20:	React PropTypes
21:	React DOM events on components
22:	How to pass a parameter to event handlers in React