Conditional rendering

If blocks

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

  • if
  • if - else
  • if let
  • if let else
  1. use yew::prelude::*;
  2. html! {
  3. if true {
  4. <p>{ "True case" }</p>
  5. }
  6. };
  1. use yew::prelude::*;
  2. let some_condition = true;
  3. html! {
  4. if some_condition {
  5. <p>{ "True case" }</p>
  6. } else {
  7. <p>{ "False case" }</p>
  8. }
  9. };
  1. use yew::prelude::*;
  2. let some_text = Some("text");
  3. html! {
  4. if let Some(text) = some_text {
  5. <p>{ text }</p>
  6. }
  7. };
  1. use yew::prelude::*;
  2. let some_text = Some("text");
  3. html! {
  4. if let Some(text) = some_text {
  5. <p>{ text }</p>
  6. } else {
  7. <p>{ "False case" }</p>
  8. }
  9. };