1"use strict";(globalThis.webpackChunkyew_docs||=[]).push([[2345],{48901(n,e,t){t.r(e),t.d(e,{assets:()=>l,contentTitle:()=>r,default:()=>a,frontMatter:()=>i,metadata:()=>o,toc:()=>p});const o=JSON.parse('{"id":"concepts/function-components/children","title":"Children","description":"Children is a special prop type that allows you to receive nested Html that is provided like html child elements.","source":"@site/versioned_docs/version-0.23/concepts/function-components/children.mdx","sourceDirName":"concepts/function-components","slug":"/concepts/function-components/children","permalink":"/docs/concepts/function-components/children","draft":false,"unlisted":false,"editUrl":"https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/function-components/children.mdx","tags":[],"version":"0.23","frontMatter":{"title":"Children"},"sidebar":"docs","previous":{"title":"Callbacks","permalink":"/docs/concepts/function-components/callbacks"},"next":{"title":"Pure Components","permalink":"/docs/concepts/function-components/pure-components"}}');var s=t(74848),c=t(28453);const i={title:"Children"},r=void 0,l={},p=[];function d(n){const e={code:"code",p:"p",pre:"pre",...(0,c.R)(),...n.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(e.p,{children:[(0,s.jsx)(e.code,{children:"Children"})," is a special prop type that allows you to receive nested ",(0,s.jsx)(e.code,{children:"Html"})," that is provided like html child elements."]}),"\n",(0,s.jsx)(e.pre,{children:(0,s.jsx)(e.code,{className:"language-rust",children:'use yew::{component, html, Html, Properties};\n\n#[component]\nfn App() -> Html {\n html! {\n // highlight-start\n <HelloWorld>\n <span>{"Hey what is up ;)"}</span>\n <h1>{"THE SKY"}</h1>\n </HelloWorld>\n // highlight-end\n }\n}\n\n#[derive(Properties, PartialEq)]\npub struct Props {\n // highlight-next-line\n pub children: Html, // the field name `children` is important!\n}\n\n#[component]\nfn HelloWorld(props: &Props) -> Html {\n html! {\n <div class="very-stylized-container">\n // highlight-next-line\n { props.children.clone() } // you can forward children like this\n </div>\n }\n}\n'})})]})}function a(n={}){const{wrapper:e}={...(0,c.R)(),...n.components};return e?(0,s.jsx)(e,{...n,children:(0,s.jsx)(d,{...n})}):d(n)}},28453(n,e,t){t.d(e,{R:()=>i,x:()=>r});var o=t(96540);const s={},c=o.createContext(s);function i(n){const e=o.useContext(c);return o.useMemo(function(){return"function"==typeof n?n(e):{...e,...n}},[e,n])}function r(n){let e;return e=n.disableParentContext?"function"==typeof n.components?n.components(s):n.components||s:i(n.components),o.createElement(c.Provider,{value:e},n.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.