# About TComponent Tab

**URL:** https://tech-community.robotics.abb.com/t/about-tcomponent-tab/14966
**Category:** AppStudio
**Created:** [May 5, 2026, 3:04pm UTC](https://tech-community.robotics.abb.com/t/about-tcomponent-tab/14966 "2026-05-05T15:04:42Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![liang\_changhong](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@liang\_changhong](https://tech-community.robotics.abb.com/u/liang_changhong)
#### Post date: [May 5, 2026, 3:04pm UTC](https://tech-community.robotics.abb.com/t/about-tcomponent-tab/14966/1 "2026-05-05T15:04:42Z")

</div>

My question:

How I can change the tab’s name? I use Instance.Tab\_1.views[0].name=‘something’; Instance.Tab\_1.render(), the tab not work.

Instance.Tab\_1.onChange = async () =\> this.tab\_OnChanged(); not work. why?

---

<div class="post-metadata">

### Author: ![yitong](https://avatars.discourse-cdn.com/v4/letter/y/3da27b/32.png) [@yitong](https://tech-community.robotics.abb.com/u/yitong)
#### Post date: [May 7, 2026, 7:39am UTC](https://tech-community.robotics.abb.com/t/about-tcomponent-tab/14966/2 "2026-05-07T07:39:23Z")

</div>

If the goal is purely visual updates, it is recommended to update the tab name through the JS layer by manipulating the tab’s reactive state or data model, rather than directly querying or modifying the DOM.

like:

```js
let tab_texts = Instance.Tab_2.container.querySelectorAll('.fp-components-tabcontainer-tabbar-text');

let tab_text_1 = tab_texts[1];

tab_text_1.textContent = 'new title';

```

If consistency with the **properties is required, it is currently quite difficult to achieve** and regarding why `render` does not behave as expected: the tab component is a view-type component, and it has multiple child components that depend on its internal state. To prevent render from causing unintended side effects— **such as child state resets or repeated updates—the framework applies special handling to view-type components.** This includes optimization strategies that suppress or control re-rendering behavior, ensuring stability of dependent child components.

---

<div class="post-metadata">

### Author: ![liang\_changhong](https://avatars.discourse-cdn.com/v4/letter/l/3bc359/32.png) [@liang\_changhong](https://tech-community.robotics.abb.com/u/liang_changhong)
#### Post date: [May 10, 2026, 11:31am UTC](https://tech-community.robotics.abb.com/t/about-tcomponent-tab/14966/3 "2026-05-10T11:31:46Z")

</div>

Thanks for your reply. The Tab component is really cumbersome to use, and the `onChange` method doesn’t work either. That’s why I replaced it with **Toggle + MultiView** instead.
