How do you make nested components?

[coarse basin]

how do you make a component that accepts a piece of rsx elements? E.G:

#[component]
pub fn NestedComponentExample(element: Element) -> Element {
    rsx! {
        h1 {"this is placed ontop of the elment"}
        {element}
    }
}

        NestedComponentExample { element: div {
           {"this is nested"}
        } }

How do you make nested components?

[umbral wasp]

More or less exactly like this, but don't forget the commas after each and every "block".

The property name you're most likely looking for is "children" that you would just place instead of your "element" parameter:

#[component]
pub fn NestedComponentExample(children: Element) -> Element {
  rsx! {
    h1 { "Element headline" },
    {children},
  }
}

// --------//
//  Usage: //
// --------//

NestedComponentExample {
  div { "This is nested" },
},

You can even nest it multiple times (I added some decoration):

NestedComponentExample {
  p { "I'm nested on the first level" },
  NestedComponentExample {
    NestedComponentExample {
      div { "I'm nested inside three `NestedComponentExample` Elements!" },
    },
  },
},

[coarse basin]

yep this does the job:

#[component]
pub fn NestedComponentExample(children: Element) -> Element{
    rsx! {
        h1 {"this is placed ontop of the elment"}
        {children}
    }
}

NestedComponentExample { 
    div {
        "this is nested"
    }
}

[umbral wasp]

The rsx macro doesn't complain about the missing comma after the h1?

[coarse basin]

nope?