> ## 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.

# Render Unique Identifier (Key)

> This article explains custom page edition support and details how to use the render unique identifier (key), its configuration path, and its application in scenarios such as switching between components of the same type. Configuring a render unique identifier prevents data errors caused by component reuse.

| **Feature** | **Free plan** | **Basic edition** | **Professional edition** | **Dedicated edition** |
| ----------- | ------------- | ----------------- | ------------------------ | --------------------- |
| Custom page | Not supported | Not supported     | Supported                | Supported             |

## 1. Introduction and Configuration Path

The render unique identifier (key) works on the same principle as the `key` attribute of a component in React. Both uniquely identify a component during rendering or when components are switched.

**Path**: On a custom page, click any component >> **Premium** on the right >> **Whether to render** >> **Render unique identifier**.

This configuration is typically used together with the **Whether to render** and **Loop** features.

Custom page

## 2. Use Cases

### 2.1 Switching Between Components of the Same Type

In the following scenario, when **Hobby** is set to **Games**, **Favorite game** is displayed; when **Hobby** is set to **Sports**, **Favorite sport** is displayed.

Configure it as follows:

1. Add a variable data source: `hobby`.

2. Set the form identifier of **Favorite game** to `game`, and bind **Whether to render** to the variable `state.hobby === 'Games'`.

3. Set the form identifier of **Favorite sport** to `sport`, and bind **Whether to render** to the variable `state.hobby === 'Sports'`.

4. Configure the `onChange` action for **Hobby**.

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function onChagne({ value, actionType, item }) {
  this.setState({
  	hobby: value,
  });
}
```

5. Bind the `onClick` action to the **Submit** button.

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
export function submit() {
	console.log(this.$('form').getValue());
}
```

With the configuration above (without a render unique identifier set), switching hobbies does swap the text box below. However, when the data is submitted, the `sport` field still contains the value from **Favorite game** even if **Sports** is selected.

Reason: **When switching between Text Box components without a key set, the underlying framework "reuses" the component from before the switch.**

To fix this, configure a **Render unique identifier** for both components.