Conditional and reactive rendering for passed children (children(cx)) ?

[jsprog]

Conditional rendering for passed children is possible, but I'm receiving compile time errors after wrapping them in a closure for reactive conditional rendering. Children isn't Copy and deriving from a closure wrapping Children(cx) didn't help ( this closure implements FnOnce, not Fn). But after spending more time, I could finally get around this problem with the help from a wrapping signal.

Questions:

• is there a better approach to the code below?
• can't the Leptos book or examples cover this case (reactive conditional rendering for passed children)?

use leptos::*;
use std::time::Duration;

fn main() {
    console_error_panic_hook::set_once();
    leptos::mount_to_body(move |cx| {
        view! { cx, <App />}
    });
}

#[component]
fn App(cx: Scope) -> impl IntoView {
    view! { cx, 
        <Parent>
            <Child />
        </Parent>
    }
}

#[component]
fn Parent(
    cx: Scope,
    children: Children,
) -> impl IntoView {
    let (children_fragment, set_children_fragment) = create_signal(cx, None);
 
   set_timeout(move || {
        set_children_fragment(Some(children(cx)))
    }, Duration::from_millis(1_000));

    view! {cx,
        {children_fragment}
    }
}

#[component]
fn Child(cx: Scope) -> impl IntoView {
    view! { cx, <div>"Child Component"</div> }
}

[gbj]

I'm a little unclear on what the version was that didn't compile, but I assume it was something like this:

#[component]
fn Parent(cx: Scope, children: Children) -> impl IntoView {
    let (value, set_value) = create_signal(cx, 0);

    view! { cx,
        <button on:click=move |_| set_value.update(|n| *n += 1)>"+1"</button>
        {move || if value() % 2 == 0 { Some(children(cx)) } else { None }}
    }
}

What you want is ChildrenFn or ChildrenFnMut instead of Children, which takes a FnOnce.

fn Parent(cx: Scope, children: ChildrenFn) -> impl IntoView {

It's given as an aside in the chapter on children so maybe it's easy to miss:

If you need a Fn or FnMut here because you need to call children more than once, we also provide ChildrenFn and ChildrenMut aliases.

EDIT: For what it's worth, Fragment does also implement Clone so something like this works perfectly fine as well—

#[component]
fn Parent(cx: Scope, children: Children) -> impl IntoView {
    let (value, set_value) = create_signal(cx, 0);
    let children = children(cx);

    view! { cx,
        <button on:click=move |_| set_value.update(|n| *n += 1)>"+1"</button>
        {move || if value() % 2 == 0 { Some(children.clone()) } else { None }}
    }
}

[jsprog]

Thank very much

I'm a little unclear on what the version was that didn't compile

I should've stated that I'm using v0.3.0

What you want is ChildrenFn or ChildrenFnMut instead of Children, which takes a FnOnce.

using ChildrenFn already solved the problem.

EDIT: For what it's worth, Fragment does also implement Clone so something like this works perfectly fine as well—

Of course, but I could confirm that doing this is forcing children components to initialize regardless of the conditional rendering state.

[jsprog]

Unfortunately, some problems are dragging this discussion for longer.

What I'm trying to achieve this time is passing "passed children" to a "final wrapper" and "through a conditional wrapping component" as described in the figures below.

• But it's quite a challenge trying to combine closures, views, and Children(Fn). The later is non clonable prior to invoking it with cx.

use leptos::*;

fn main() {
    console_error_panic_hook::set_once();
    leptos::mount_to_body(move |cx| {
        view! { cx, <App/> }
    })
}

#[component]
fn App(cx: Scope) -> impl IntoView {
    view! { cx,
        <div style="border: solid 1px black; margin: 10px;">
            "App"
            <ConditionalWrapper>
                <div style="border: solid 1px blue; margin: 10px;">"content sent through conditional wrapper"</div>
            </ConditionalWrapper>
        </div>
    }
}

#[component]
fn ConditionalWrapper(cx: Scope, children: ChildrenFn) -> impl IntoView {
    let (visible, set_visible) = create_signal(cx, true);
    let interval = set_interval_with_handle(move || {
        set_visible.update(|v| *v = !*v);
    }, std::time::Duration::from_secs(1));

    view! { cx,
        <div style="border: solid 1px red; margin: 10px; min-height: 150px;">
            {move || format!("Conditional Wrapper ({})", if visible.get() { "visible" } else { "invisible" } )}

            // This works but:
            //  - using cx from ConditionalWrapper (not from Wrapper)
            <Wrapper>
                {children(cx)}
            </Wrapper>

            // Show won't accept {children(cx)},
            //  - due to `move` and conflicts between the view and a closure internal to `Show`
            //  - children is non clonable
            //  - please un-comment the wrapped 3 line to confirm
            <Show when=move || visible.get()
                fallback=|cx| view! { cx, }
            >
                // <Wrapper>
                //     {children(cx)}
                // </Wrapper>
                ""
            </Show>
        </div>
    }
}

#[component]
fn Wrapper(cx: Scope, children: ChildrenFn) -> impl IntoView {
    view! { cx,
        <div style="border: solid 1px green; margin: 10px;">
            "Wrapper"
            {children(cx)}
        </div>
    }
}

Questions:
1- How could we pass "passed children" through an "intermediary component", to later render them under the scope of the "final wrapper".
2- How could I achieve the same thing under conditional rendering, which is likely to involve closures.

[gbj]

You could wrap the initial ChildrenFn using store_value. This gives you a non-reactive Copy wrapper for something. It can then be accessed and called like .with_value(|children| children(cx))