---
title: 'Lists'
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'

## Fragments

The `html!` macro always requires a single root node. In order to get around this restriction, it's valid to wrap content in empty tags:

<Tabs>
  <TabItem value="Valid" label="Valid">

```rust
use yew::html;

html! {
    <>
        <div></div>
        <p></p>
    </>
}
```

  </TabItem>
  <TabItem value="Invalid" label="Invalid">

```rust
use yew::html;

/* error: only one root html element allowed */
html! {
    <div></div>
    <p></p>
}
```

  </TabItem>
</Tabs>

## Iterators

Yew supports two different syntaxes for building html from an iterator:

<Tabs>
  <TabItem value="Syntax type 1" label="Syntax type 1">

```rust
use yew::{html, Html};

html! {
    <ul class="item-list">
        { self.props.items.iter().map(renderItem).collect::<Html>() }
    </ul>
}
```

  </TabItem>
  <TabItem value="Syntax type 2" label="Syntax type 2">

```rust
use yew::html;

html! {
    <ul class="item-list">
        { for self.props.items.iter().map(renderItem) }
    </ul>
}
```

  </TabItem>
</Tabs>

## Relevant examples

-   [TodoMVC](https://github.com/yewstack/yew/tree/v0.18/examples/todomvc)
-   [Keyed List](https://github.com/yewstack/yew/tree/v0.18/examples/keyed_list)
-   [Router](https://github.com/yewstack/yew/tree/v0.18/examples/router)
