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
use yew::html;
html! {
<>
<div></div>
<p></p>
</>
}
use yew::html;
/* 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
use yew::{html, Html};
html! {
<ul class="item-list">
{ self.props.items.iter().map(renderItem).collect::<Html>() }
</ul>
}
use yew::html;
html! {
<ul class="item-list">
{ for self.props.items.iter().map(renderItem) }
</ul>
}