Lists

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:

Valid

Invalid

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

Iterators

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

Syntax Type 1

Syntax Type 2

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