> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Conditional Rendering

> Learn how to use the Render Condition setting in YiDA to control component visibility through variable binding, achieving the same effect as conditional rendering in React.

You may want a component to render only under certain conditions, similar to the following approach in React. YiDA provides a **Render Condition** setting that lets you easily control component visibility through variable binding:

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
function HelloText({showName, name}) {
	return (
  	<div>
    {showName && (<span>{name}</span>)} // Use showName to determine whether to display the name text component
    </div>
  );
}
```

## Configure

Every component has a **Render Condition** property in its Premium settings, which controls the conditional rendering of the component.

The default render condition is `true`. Typically, you use variable binding to set the render condition.

<Tip>
  A component with a configured render condition displays a branch icon in the Outline tree, indicating that the Render Condition property has been set.
</Tip>

## Use Cases

The following simple example demonstrates how to use conditional rendering.

Control the visibility of a text component through URL parameters. When the `showName` parameter is present in the URL, the component is displayed; otherwise, it is hidden. Configure it as follows:

* Set the text component's Render Condition property using variable binding.

* Bind the global variable `state.urlParams.showName` to the text component's Render Condition property to determine whether the text component renders based on the URL parameter.

Finally, control the display of the text component by setting the `showName` parameter on the preview page as shown below. You can open the preview page directly in the browser by clicking **Open in New Window** in the upper-right corner of the preview page to configure its parameters:

* URL without the `showName` parameter:

* URL with the `showName` parameter: