React: How to focus on tab after creating? - reactjs

Question

First of all, I am new to React.
Im using "easyui for React" for my App (Tab Component in my case)
My goals:
When click on a button on the LeftAccordion, a correspoding tab will be added and focus automatically.
When click on a button on the LeftAccordion, focus on the corresponding tab (if already existed)
Problems:
The tabs wouldn't be focused automatically after added. It always focus on the first one (Home) even when the prop selectedTabIndex has been changed (App's state changed).
WHAT I DID:
Click on button [PRODUCT] -> Tab PRODUCT will be added (but not focused)
Click on button [PRODUCT] again -> Tab PRODUCT still not focused
Click on button [CUSTOMER] -> Tab CUSTOMER will be added (but not focused), it still focus on tab HOME.
Now is the thing that made me get mad:
Click on button [PRODUCT] one more time -> Tab PRODUCT will be focused.
Click on button [CUSTOMER] -> Tab CUSTOMER will be focused.
Click on button [INVOICE] -> tab CUSTOMER will be added (but not focused), it still focus on the last one we selected.
Click on any button else on the LeftAccordion, the tab will be focused correctly again.
I knew that the UI will be re-renderred after state changed, but in my case only the tabs would be added, but not get the focus.
Please help! Thank you in advance!
App.js
import React, {useState} from 'react'
import {LinkButton, TabPanel, Tabs} from 'rc-easyui'
import LeftAccordion from "../../components/LeftAccordion";
const App = ({children}) => {
const [data, setData] = useState({
tabs: [{
title: 'HOME', iconCls: 'icon-store-1616', closable: false
}],
selectedTabIndex: 0
}
)
const handleAddTab = (newTab) => {
let clonedTabs = [...data.tabs] //// hoặc dùng data.tabs.slice() => React mới xác nhận có thay đổi giá trị của state
let currentTabs = []
let selectedTabIndex = 0
clonedTabs.forEach(tab => {
currentTabs.push(tab)
})
// check if tab is already exist by Tab's title
let existTab = currentTabs.find(x=>x.title === newTab.title)
if (existTab === undefined) {
currentTabs.push(newTab)
selectedTabIndex = currentTabs.length - 1 // select last tab
}else{
selectedTabIndex = currentTabs.indexOf(existTab)
}
setData(prev => ({
tabs: [...currentTabs],
selectedTabIndex: selectedTabIndex
})
)
}
return(
<>
<LeftAccordion addTabCallback={handleAddTab}></LeftAccordion>
<ContentArea>
<Tabs style={{height:'100%'}} scrollable selectedIndex={data.selectedTabIndex}
onTabClose={()=>{
console.log('close')
}
}
onTabSelect={() => {
console.log('OK')
}}
>
{
data.tabs.map((tab, index) => {
return (
<TabPanel key={index} title={tab.title} closable={tab.closable ? true: false} iconCls={tab.iconCls}>
<p>Tab {index}</p>
</TabPanel>
)
})
}
</Tabs>
</ContentArea>
</>
)
}
export default App
LeftAcordion.js
import React, {Component} from 'react';
import {LinkButton} from 'rc-easyui'
class LeftAccordion extends Component {
constructor(props) {
super(props);
this.state = {
buttons: [
{
text: 'HOME',
iconCls: 'icon-store-1616'
},
{
text: 'PRODUCT',
iconCls: 'icon-product-1616'
},
{
text: 'CUSTOMER',
iconCls: 'icon-customer-1616'
},
{
text: 'INVOICE',
iconCls: 'icon-invoice-1616'
}
]
}
}
render() {
return (
<div className={'leftaccordion-wrapper'}>
<div className={'accordion-splitter-horizontal'}></div>
{
this.state.buttons.map((button, index) => {
return(
<div key={index} className={'accordion-header panel-header f-noshrink'}>
<LinkButton iconCls={[button.iconCls]} plain
onClick={() => {
let tab = {title: button.text, iconCls: button.iconCls, closable: true}
this.props.addTabCallback(tab)
}
}>{button.text}</LinkButton>
</div>
)
})
}
</div>
);
}
}
export default LeftAccordion;