React Fragments for Cleaner DOM

Snippet

React Fragments for Cleaner DOM

Fragments allow you to group a list of children without adding extra nodes to the DOM. You can use the explicit <Fragment> component or the short <> syntax.

snippet.js
javascript
import { Fragment } from 'react';
 
function ListItems() {
  return (
    <>
      <li>Item 1</li>
      <li>Item 2</li>
    </>
  );
}

react

Breakdown

<> ... </>

The shorthand syntax for a Fragment, wrapping multiple elements without a container div.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

React Fragments for Cleaner DOM

Related