How to render a tree?

[LitchiInn]

I have a NodeTree
How to render it?

#[inline_props]
pub fn Menu(cx: Scope, menus: Vec<MenuResource>) -> Element {
    let mut stack: VecDeque<&MenuResource> = VecDeque::new();
    stack.push_back(&menus[0]);
    log::info!("menu: {:?}", menus);
    cx.render(rsx! {
        ul {
            class: "menu bg-base-200 w-56 rounded-box",

            traverse_tree(cx, &menus[0])
        }
    })
}

fn traverse_tree(cx: Scope<MenuProps>, menu: &MenuResource) {
    log::info!("Node Value: {}", menu.name);
    rsx! {
        li {
            if !menu.children.is_empty() {
                rsx! {
                    details {
                        open: true
                    }
                    summary {
                        String::as_str(&menu.name)
                    }
                }
            }else {
                rsx! {
                    ul {
                        li {
                            button {
                                class: "btn btn-xs sm:btn-sm md:btn-md lg:btn-lg",
                                Icon {
                                    title: &menu.name,
                                    icon: HiMenu,
                                }
                                a {
                                    String::as_str(&menu.name)
                                }
                            }
                        }
                    }  
                }      
            }
        }
    };

    for child in &menu.children {
        traverse_tree(cx, child);
    }
}

it didn't work

[ealmloff]

rsx!{} just creates a fragment of HTML, it will only be rendered if it is returned from a component or used in another rsx!{} that is returned.

In this code, you create a rsx value, but never use it:

rsx! {
    li {
        if !menu.children.is_empty() {
            rsx! {
                details {
                    open: true
                }
                summary {
                    String::as_str(&menu.name)
                }
            }
        }else {
            rsx! {
                ul {
                    li {
                        button {
                            class: "btn btn-xs sm:btn-sm md:btn-md lg:btn-lg",
                            Icon {
                                title: &menu.name,
                                icon: HiMenu,
                            }
                            a {
                                String::as_str(&menu.name)
                            }
                        }
                    }
                }  
            }      
        }
    }
};

Instead you can return the rsx value:

#[inline_props]
pub fn Menu(cx: Scope, menus: Vec<MenuResource>) -> Element {
    let mut stack: VecDeque<&MenuResource> = VecDeque::new();
    stack.push_back(&menus[0]);
    log::info!("menu: {:?}", menus);
    cx.render(rsx! {
        ul {
            class: "menu bg-base-200 w-56 rounded-box",

            traverse_tree(cx, &menus[0])
        }
    })
}

fn traverse_tree(cx: Scope<MenuProps>, menu: &MenuResource) -> LazyNodes {
    log::info!("Node Value: {}", menu.name);
    rsx! {
        li {
            if !menu.children.is_empty() {
                rsx! {
                    details {
                        open: true
                    }
                    summary {
                        String::as_str(&menu.name)
                    }
                }
            }else {
                rsx! {
                    ul {
                        li {
                            button {
                                class: "btn btn-xs sm:btn-sm md:btn-md lg:btn-lg",
                                Icon {
                                    title: &menu.name,
                                    icon: HiMenu,
                                }
                                a {
                                    String::as_str(&menu.name)
                                }
                            }
                        }
                    }  
                }      
            }
        }
        for child in &menu.children {
            traverse_tree(cx, child)
        }
    }
}

[LitchiInn]

thank you