File Structure:

-Assets
|-TabHandler.jsx

App.jsx

Ok, I have a react component TabHandler, this is a tabs component from Ant Design:

/* Assets/TabHandler.jsx */
import React from 'react';
import { Tabs } from 'antd';
import type { TabsProps } from 'antd';

const onChange = (key: string) => {
  console.log(key);
};

const items: TabsProps['items'] = [
  {
    key: '1',
    label: 'Test',
    children: <button id="test"/>,
  },
];

const App: React.FC = () => <Tabs defaultActiveKey="1" items={items} onChange={onChange} />;

export default App;

I have another file, called from an electron forge + react environment, but that shouldnt be important. Anyways, here’s the code:

/* app.jsx */

import { createRoot } from 'react-dom/client';
import React, { useRef, useState } from 'react';
import TabHandler from "./Assets/TabHandler.jsx";

const Root = createRoot(document.getElementById('root'));
webViewRoot.render(<TabHandler />);

After this, i want to attach a event to the button inside the TabHandler, and once this button is clicked, change the title of the active tab to “Test Complete”. IT IS VERY IMPORTANT THAT IT CHANGES THE TITLE OF THE ACTIVE TAB INSTEAD OF THE TAB AT A INDEX.

I’ve tried using the html element, and making the items list a global variable, changing the text inside the proper element is reverted or does nothing, and making the items list a global variable will only do anything when the tab is changed.