diff --git a/docs/guide/src/concepts/conditional_rendering.md b/docs/guide/src/concepts/conditional_rendering.md index c1a324cee..d5fc002d8 100644 --- a/docs/guide/src/concepts/conditional_rendering.md +++ b/docs/guide/src/concepts/conditional_rendering.md @@ -67,7 +67,7 @@ fn App((cx, props): Component<()>) -> Element { } ``` -Do note: the `rsx!` macro returns a `Closure`, an anonymous function that has a unique type. Because every closure is unique, we cannot return *just* `rsx!` from a match statement. Every `rsx!` call must be rendered first when used in match statements. +Do note: the `rsx!` macro returns a `Closure`, an anonymous function that has a unique type. To make patterns like these less verbose, the `rsx!` macro accepts an optional first argument on which it will call `render`. Our previous component can be shortened with this alternative syntax: @@ -86,6 +86,19 @@ This syntax even enables us to write a one-line component: static App: Fc<()> = |(cx, props)| rsx!(cx, "hello world!"); ``` +Alternatively, for match statements, we can just return the builder itself and pass it into a final, single call to `cx.render`: + +```rust +fn App((cx, props): Component<()>) -> Element { + let greeting = match get_name() { + "jack" => rsx!("Hey Jack, how's Diane?" ), + "diane" => rsx!("Hey Diana, how's Jack?" ), + name => rsx!("Hello, {name}!" ), + }; + cx.render(greeting) +} +``` + ## Nesting RSX By looking at other examples, you might have noticed that it's possible to include `rsx!` calls inside other `rsx!` calls. With the curly-brace syntax, we can include anything in our `rsx!` that implements `IntoVnodeList`: a marker trait for iterators that produce Elements. `rsx!` itself implements this trait, so we can include it directly: @@ -117,8 +130,8 @@ In the case of a log-in screen, we might want to display the same NavBar and Foo ```rust let screen = match logged_in { - true => rsx!(cx, DashboardScreen {}), - false => rsx!(cx, LoginScreen {}) + true => rsx!(DashboardScreen {}), + false => rsx!(LoginScreen {}) }; cx.render(rsx!{