yew/website/docs/concepts/html/conditional-rendering.mdx

---
title: "Conditional rendering"
description: "Rendering nodes conditionally in html!"
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';


## If blocks

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

<Tabs>
  <TabItem value="if" label="if">

```rust
use yew::html;

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

  </TabItem>
  <TabItem value="if - else" label="if - else">

```rust
use yew::html;
let some_condition = true;

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

  </TabItem>
  <TabItem value="if let" label="if let">

```rust
use yew::html;
let some_text = Some("text");

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

  </TabItem>
  <TabItem value="if let else" label="if let else">

```rust
use yew::html;
let some_text = Some("text");

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

  </TabItem>
</Tabs>