Version: Next

Conditional Rendering

If blocks#

To conditionally render some markup, we wrap it in an if block:

if
if - else
if let
if let else

use yew::prelude::*;

html! {
    if true {
        <p>{ "True case" }</p>
    }
};

use yew::prelude::*;
let some_condition = true;

html! {
    if some_condition {
        <p>{ "True case" }</p>
    } else {
        <p>{ "False case" }</p>
    }
};

use yew::prelude::*;
let some_text = Some("text");

html! {
    if let Some(text) = some_text {
        <p>{ text }</p>
    }
};

use yew::prelude::*;
let some_text = Some("text");

html! {
    if let Some(text) = some_text {
        <p>{ text }</p>
    } else {
        <p>{ "False case" }</p>
    }
};

Edit this page