Kaede Hoshikawa d803df9336
Update documentation around Children (#3297)
* Update Children to use Html.

* Fix website.

* Update website/docs/advanced-topics/children.mdx

* add further reading section

---------

Co-authored-by: Muhammad Hamza <muhammadhamza1311@gmail.com>
2023-08-05 18:33:23 +05:00

38 lines
846 B
Plaintext

---
title: 'Children'
---
`Children` is a special prop type that allows you to receive nested `Html` that is provided like html child elements.
```rust
use yew::{function_component, html, Html, Properties};
#[function_component]
fn App() -> Html {
html! {
// highlight-start
<HelloWorld>
<span>{"Hey what is up ;)"}</span>
<h1>{"THE SKY"}</h1>
</HelloWorld>
// highlight-end
}
}
#[derive(Properties, PartialEq)]
pub struct Props {
// highlight-next-line
pub children: Html, // the field name `children` is important!
}
#[function_component]
fn HelloWorld(props: &Props) -> Html {
html! {
<div class="very-stylized-container">
// highlight-next-line
{ props.children.clone() } // you can forward children like this
</div>
}
}
```