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. use yew::html;
  3. html! {
  4.     <>
  5.         <div></div>
  6.         <p></p>
  7.     </>
  8. }
  1. use yew::html;
  3. /* error: only one root html element allowed */
  4. html! {
  5.     <div></div>
  6.     <p></p>
  7. }

Iterators

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

  • Syntax type 1
  • Syntax type 2
  1. use yew::{html, Html};
  3. html! {
  4.     <ul class="item-list">
  5.         { self.props.items.iter().map(renderItem).collect::<Html>() }
  6.     </ul>
  7. }
  1. use yew::html;
  3. html! {
  4.     <ul class="item-list">
  5.         { for self.props.items.iter().map(renderItem) }
  6.     </ul>
  7. }

Relevant examples