What is the best way handle String in multiple closures?

[canyon-service]

I have a component that loops through a vector of Strings that is passed to multiple closures, one issue is that it cannot be passed to multiple closures. I have a fix to manually clone the String 2 times for 2 closures. Is there a better way of doing this?

#[component]
fn TestComponent() -> Element {
    let path_loader: Loader<Vec<String>> = use_loader(test_api)?;

    rsx! {
        for path in path_loader() {
            div {
                p { "path: {path}" }
                input {
                    r#type: "checkbox",
                    oninput: move |event: Event<FormData>| {
                        info!("Selected {} {}", event.checked(), path);
                    },
                }
                button {
                    onclick: move |_| {
                        info!("Deleted {}", path); // use of moved value: `path`
                    },
                    "delete {path}"
                }
                button {
                    onclick: move |_| { // use of moved value: `path`
                        info!("Deleted {}", path);
                    },
                    "edit {path}"
                }

            }
        }
    }
}

Ugly fix

#[component]
fn TestComponent() -> Element {
    let path_loader: Loader<Vec<String>> = use_loader(test_api)?;

    rsx! {
        for path in path_loader() {
            div {
                if let (p1, p2) = (path.clone(), path.clone()) { // Manually clone, ugly fix
                    p { "path: {path}" }
                    input {
                        r#type: "checkbox",
                        oninput: move |event: Event<FormData>| {
                            info!("Selected {} {}", event.checked(), path);

                        },
                    }
                    button {
                        onclick: move |_| {
                            info!("Deleted {}", p1);
                        },
                        "delete {path}"
                    }

                    button {
                        onclick: move |_| {
                            info!("Deleted {}", p2);
                        },
                        "edit {path}"
                    }
                }
            }
        }
    }
}

[canyon-service]

Also I have something similar to:

dioxus/examples/01-app-demos/hotdog/src/frontend.rs

Line 13 in d312ef8

rsx! {

#[component]
pub fn Favorites() -> Element {
    let mut favorites = use_loader(list_dogs)?;

    rsx! {
        div { id: "favorites",
            for (id , url) in favorites.cloned() {
                div { class: "favorite-dog", key: "{id}",
                    img { src: "{url}" }
                    button {
                        onclick: move |_| async move {
                            _ = remove_dog(id).await;
                            favorites.restart();
                        },
                        "❌"
                    }
                }
            }
        }
    }
}

Here id is an integer, if it is a string it is not even possible to clone to the async onclick unless I am missing something

[Yuze0101]

https://docs.rs/dioxus/0.7.3/dioxus/prelude/macro.to_owned.html
You can use to_owned

[matyushkin]

The idiomatic Dioxus way is the to_owned! macro from the prelude. It creates owned clones of variables before they are captured by closures:

#[component]
fn TestComponent() -> Element {
    let path_loader: Loader<Vec<String>> = use_loader(test_api)?;

    rsx! {
        for path in path_loader() {
            div {
                p { "path: {path}" }
                input {
                    r#type: "checkbox",
                    oninput: {
                        to_owned![path];
                        move |event: Event<FormData>| {
                            info!("Selected {} {}", event.checked(), path);
                        }
                    },
                }
                button {
                    onclick: {
                        to_owned![path];
                        move |_| {
                            info!("Deleted {}", path);
                        }
                    },
                    "delete {path}"
                }
                button {
                    onclick: {
                        to_owned![path];
                        move |_| {
                            info!("Edit {}", path);
                        }
                    },
                    "edit {path}"
                }
            }
        }
    }
}

to_owned![path] expands to let path = path.to_owned(); — it creates a fresh owned clone that each closure can capture independently.

You can also clone multiple variables at once: to_owned![path, other_val];

@canyon-service regarding the String in async closures issue — the same pattern works:

onclick: {
    to_owned![url];
    move |_| async move {
        // url is owned here
        do_something(url).await;
    }
}

See the macro docs for details.