Children

Children is a special prop type that allows you to recieve nested Html that is provided like html child elements.

  1. use yew::{function_component, html, Html, Properties, Children};
  3. #[function_component]
  4. fn App() -> Html {
  5.     html! {
  6.         <HelloWorld>
  7.             <span>{"Hey what is up ;)"}</span>
  8.             <h1>{"THE SKY"}</h1>
  9.         </HelloWorld>
  10.     }
  11. }
  13. #[derive(Properties, PartialEq)]
  14. pub struct Props {
  15.     pub children: Children, // the field name `children` is important!
  16. }
  18. #[function_component]
  19. fn HelloWorld(props: &Props) -> Html {
  20.     html! {
  21.         <div class="very-stylized-container">
  22.             { for props.children.iter() } // you can forward children like this
  23.         </div>
  24.     }
  25. }

Further reading