DynChild is populated as a single Child in the components' children property about leptos HOT 4 CLOSED

Was putting together this example and got distracted. Rather than using children just pass things as normal props. Here is an example that supports either dynamic or not.

#[component]
pub fn WrapsChildren(#[prop(into)] nodes: MaybeSignal<Vec<View>>) -> impl IntoView {
    let nodes = move || {
        nodes
            .get()
            .into_iter()
            .map(|view| view! { <li>{view}</li> })
            .collect::<Vec<_>>()
    };
    view! {
        <ul>{nodes}</ul>
    }
}

#[component]
pub fn App() -> impl IntoView {
    let providers = &[
        "Twitter", "Github", "Discord", "Twitter", "Github", "Discord",
    ];
    let buttons = move || {
        providers
            .iter()
            .map(|provider| {
                view! {
                    <div>
                        {provider.to_string()}
                    </div>
                }
                .into_view()
            })
            .collect::<Vec<_>>()
    };

    view! {
        <WrapsChildren nodes={Signal::derive(buttons)}/>
        <WrapsChildren nodes={["A", "B", "C"].into_iter().map(IntoView::into_view).collect::<Vec<_>>()}/>
    }
}

from leptos.

This is working as designed and is the only reasonable implementation given the way the framework works.

from leptos.

In this case how can you create a dynamic number of items where each item is decorated separatelly by the component ?

from leptos.

Just to expand a little for anyone reading this in the future...

This is a genuine drawback of fine-grained reactive UI relative to something like a virtual DOM — Since we only run component functions once to set up the reactive system, the only thing the component function knows about a dynamic child is "this is a dynamic child", because this line only runs once:

    let children = nodes
        .into_iter()

The solution in general is to pass around data, or to pass around more specific data structures. Where the pattern in React might be to compose everything through components and child components, sometimes we'll end up passing props with a little more type information.

There are clear trade-offs here but I think it's worth it.

from leptos.