How to use values of signals in onclick of a button

[miaomiaowu0428]

hello, me again and code here:

#[component]
pub(crate) fn CAcceptFriendWindow() -> Element {
    // get a Vec<String> here
    let friend_requests = use_resource(move || get_friend_requests());

    // I copy tihs match expression from https://dioxuslabs.com/learn/0.5/guide/data_fetching
    match &*friend_requests.read_unchecked() {
        Some(Ok(list)) => {
            rsx! {
                div {
                    for sender in list {
                        // A div shows the sender's username, and a button to accept friendship request
                        div { "{sender}" }
                        button {
                            "Accept"
                            onclick: move |_| {
                                println!("Accepting friend request from {}", sender);
                                // send a request to server, 
                            }
                        }
                    }
                }
            }
        }
        Some(Err(err)) => {
            // if there was an error, render the error
            rsx! {"An error occurred while fetching friend requests: {err}"}
        }
        None => {
            // if the future is not resolved yet, render a loading message
            rsx! {"Loading items"}
        }
    }
}

compiler says &*friend_requests.read_unchecked() creates a temporary value which is freed while still in use (in onclick method)
how to solve this

[miaomiaowu0428]

this will solve

#[component]
fn FriendRequestItem(sender: String) -> Element {
    rsx! {
        div { "{sender}" }
        button {
            onclick: move |_| {
                println!("Accepting friend request from {}", sender);
            },
            "Accept"
        }
    }
}

#[component]
pub(crate) fn CAcceptFriendWindow() -> Element {
    let friend_requests = use_resource(move || get_friend_requests());

    match &*friend_requests.read_unchecked() {
        Some(Ok(list)) => {
            rsx! {
                div {
                    for sender in list {
                        FriendRequestItem { sender: sender }
                    }
                }
            }
        }
        Some(Err(err)) => {
            rsx! {"An error occurred while fetching friend requests: {err}"}
        }
        None => {
            rsx! {"Loading items"}
        }
    }
}