yew example of component communication using callbacks

yew-callbacks-generic.rs

use std::fmt::Display;

use yew::prelude::*;
use yew::{function_component, html, Callback, Html, Properties};

#[derive(Properties, PartialEq)]
pub struct Props<T: PartialEq + Clone + Display> {
    pub onselect: Callback<T>,
    pub items: Vec<T>,
}

#[function_component]
fn SelectItem<T: PartialEq + Clone + Display + 'static>(props: &Props<T>) -> Html {
    let items = props.items.clone();
    html! {
        <div>
            {for items.into_iter().map(|item: T| {
                let onclick = {
                    let cb = props.onselect.clone();
                    let item = item.clone();
                    Callback::from(move |_| {
                        cb.emit(item.clone());
                    })
                };
                html! { <button {onclick}>{format!("{}", &item)}</button> }
            })}
        </div>
    }
}

#[function_component]
fn App() -> Html {
    let items = vec!["red".to_string(), "blue".to_string(), "orange".to_string()];
    let selected_item = use_state(|| String::from("none"));

    let onselect: Callback<_> = {
        let selected_item = selected_item.clone();
        Callback::from(move |item| {
            selected_item.set(item);
        })
    };

    html! {
        <div>
            <SelectItem<String> {onselect} {items} />
            <br />
            {"selected item: "}
            { (*selected_item).clone() }
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

yew-callbacks.rs

use yew::prelude::*;
use yew::{function_component, html, Callback, Html, Properties};

#[derive(Properties, PartialEq)]
pub struct Props {
    pub onselect: Callback<String>,
    pub items: Vec<&'static str>,
}

#[function_component]
fn SelectItem(props: &Props) -> Html {
    let items = props.items.clone();
    html! {
        <div>
            {for items.into_iter().map(|item: &str| {
                let onclick = {
                    let cb = props.onselect.clone();
                    Callback::from(move |_| {
                        cb.emit(String::from(item));
                    })
                };
                html! { <button {onclick}>{item}</button> }
            })}
        </div>
    }
}

#[function_component]
fn App() -> Html {
    let items = vec!["red", "blue", "orange"];
    let selected_item = use_state(|| String::from("none"));

    let onselect: Callback<String> = {
        let selected_item = selected_item.clone();
        Callback::from(move |item: String| {
            selected_item.set(item);
        })
    };

    html! {
        <div>
            <SelectItem {onselect} {items} />
            <br />
            {"selected item: "}
            { (*selected_item).clone() }
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}