Search⌘ K
Home
Courses
React Deep Dive: From Beginner to Advanced

Fragments

Explore how to use React Fragments to return multiple elements without adding extra nodes in your JSX. Understand why fragments solve common markup issues and how to implement them, including shorthand syntax and their importance in loops requiring the key prop.

We'll cover the following...

Returning multiple children without a surrounding element

Fragments are some sort of a special component and allow us to create valid JSX without leaving visible traces in the rendered markup. They are a solution to the problem of only ever returning a single element at the top in JSX. This is valid JSX:

render() {
  return (
    <ul>
      <li>Bullet Point 1</li>
      <li>Bullet Point 2</li>
      <li>Bullet Point 3</li>
    </ul>
  );
}

But this isn’t:

render() {
  return (
    <li>Bullet Point 1</li>
    <li>Bullet Point 2</li>
    <li>Bullet Point 3</li>
  );
}

In this example, multiple elements are being returned in the render() method ...