Passing state update function to child components

[yerlaser]

I am trying to build a simple counter app but want to make the buttons a bit prettier with TailwindCSS.
Since Tailwind classes can be very verbose I want to extract those buttons into a component.
However, this creates a problem in that the on:click events are only supported on HTML native button elements and not on custom components.
That makes it necessary to pass the state updating function to the child component.
Here's my attempt at that. That doesn't compile though with the error given below.
So, how would you handle such a situation?

//main.rs
use sycamore::prelude::*;
mod button;
mod count;
mod props;

fn main() {
    sycamore::render(|cx| {
        let state = create_signal(cx, 0i32);
        let update = |action| {
            if action == 0 {
                state.set(0);
            } else {
                state.set(*state.get() + action);
            }
        };
        view! { cx,
            header {
                button::Button(updater=&update, action=&-1)
                //button::Button(updater=&update, action=&0)
                //button::Button(updater=&update, action=&1)
            }
            count::Count(value=state)
        }
    });
}

//props.rs
use sycamore::prelude::*;

#[derive(Prop)]
pub struct Base<'a> {
    pub value: &'a ReadSignal<i32>,
}

#[derive(Prop)]
pub struct ButtonProps<'a> {
    pub updater: &'a dyn Fn(i32),
    pub action: &'a i32,
}

//button.rs
use super::props::ButtonProps;
use sycamore::prelude::*;

#[component]
pub fn Button<'a, G: Html>(cx: Scope<'a>, props: ButtonProps<'a>) -> View<G> {
    let label = match props.action {
        -1 => "-",
        0 => "0",
        _ => "+",
    };
    let cls = match props.action {
        -1 => "h-12 px-6 m-2 text-lg text-red-100 transition-colors duration-150 bg-red-700 rounded-lg focus:shadow-outline hover:bg-red-800",
        0 => "h-12 px-6 m-2 text-lg text-yellow-100 transition-colors duration-150 bg-yellow-700 rounded-lg focus:shadow-outline hover:bg-yellow-800",
        _ => "h-12 px-6 m-2 text-lg text-green-100 transition-colors duration-150 bg-green-700 rounded-lg focus:shadow-outline hover:bg-green-800",
    };
    let on_click = |_| (*props.updater)(*props.action);
    view! { cx,
        button(on:click=on_click, class=cls) { (label) }
    }
}

//count.rs
use super::props::Base;
use sycamore::prelude::*;

#[component]
pub fn Count<'a, G: Html>(cx: Scope<'a>, props: Base<'a>) -> View<G> {
    view! { cx,
        h1(class="text-3xl") { "Count: " (*props.value.get()) }
    }
}

//Error message
error[E0597]: `update` does not live long enough
  --> src/main.rs:18:40
   |
16 |           view! { cx,
   |           -       -- lifetime `'1` appears in the type of `cx`
   |  _________|
   | |
17 | |             header {
18 | |                 button::Button(updater=&update, action=&-1)
   | |                                        ^^^^^^^ borrowed value does not live long enough
19 | |             }
20 | |             count::Count(value=state)
21 | |         }
   | |         -
   | |         |
   | |_________`update` dropped here while still borrowed
   |           argument requires that `update` is borrowed for `'1`

For more information about this error, try `rustc --explain E0597`.
error: could not compile `sycamore` due to previous error

[lukechu10]

Try moving in the update function instead of borrowing it. To do so, you'll unfortunately need to add an extra generic to prop struct like so:

#[derive(Prop)]
pub struct ButtonProps<'a, F>
where
    F: Fn(i32),
{
    pub updater: F,
    pub action: &'a i32,
}

This way you won't have any borrowing issues.

However, if you really want to borrow the update function, the problem is that the closure itself lives on the stack which does not last long enough. It needs to be moved onto the heap so that it may live as long as the reactive scope ('a). The simplest way to do so would be to add the following to main.rs

let update = create_ref(cx, update)

[lukechu10]

Also having &'a i32 is a bit redundant. You can just use i32 directly since it implements Copy.

[yerlaser]

For some reason I couldn't make your first suggestion to compile.
Firstly, in main.rs it complained about not having dyn but after adding that I couldn't make types match in the updater=&update expression.

But the second suggestion with create_ref did work and that's sufficient for me now.

Thank you!