React Fragments

Fragments group elements without extra DOM nodes.

Long Syntax

```javascript import { Fragment } from 'react';

function List() { return ( <Fragment> <li>Item 1</li> <li>Item 2</li> </Fragment> ); } ```

Short Syntax

```javascript function List() { return ( <> <li>Item 1</li> <li>Item 2</li> </> ); } ```

With Keys

```javascript function List({ items }) { return ( <> {items.map(item => ( <Fragment key={item.id}> <dt>{item.term}</dt> <dd>{item.description}</dd> </Fragment> ))} </> ); } ```

Remember

- No extra DOM nodes - Use short syntax <> usually - Long syntax needed for keys

> Next: Learn strict mode!