# Visibility

By default, the KendoReact Dialog is visible whenever you render it.

To control its visibility, conditionally render the Dialog based on a state variable. When the condition is falsy, the Dialog is removed from the view.

```jsx
    // Unmount the Dialog to hide it.
    {visible && <Dialog />}
```

To hide the Dialog based on user interaction, handle its [`onClose`](https://www.telerik.com/kendo-react-ui-develop/components/dialogs/api/dialogprops#onclose) event, which fires when users click the titlebar **Close** button or press `Esc`, and update the state that controls its rendering.

The following example demonstrates how to show and hide the Dialog based on its state. The Dialog renders while the state is `true` and closes when you click the **Close** button, **No**, or **Yes**. Clicking **Open Dialog** renders it again.

[Demo Source](https://demos.telerik.com/kendo-react-ui/dialogs/dialog/overview/func/source.txt)

## Suggested Links

* [API Reference of the Dialog](https://www.telerik.com/kendo-react-ui-develop/components/dialogs/api/dialog)