https://jsfiddle.net/t5q37nbe/2/
First of all, I have created a tab section using AntDesign library. The problem that I have is Tab-1 is default Tab. As soon as the code runs, it automatically opens with the Tab-1. On clicking the ADD Tab-1 button, another tab-1 gets popped. I don't want that to happen. On clicking Tab-1 it shouldn't open a new tab again.
Here I have set '1' for focusing and openingpane in order to be default,
this.state = {
focusingPaneKey: '1',
openingPaneKeys: [1],
}
Can any one help me in solving this glitch.
React code :
const { Tabs, Button } = antd
const { TabPane } = Tabs
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
focusingPaneKey: '1',
openingPaneKeys: ['1'],
}
}
openPane = (paneKey) => {
this.setState(({ ...state }) => {
if (!state.openingPaneKeys.includes(paneKey)) {
state.openingPaneKeys = [...state.openingPaneKeys, paneKey]
}
state.focusingPaneKey = paneKey
return state
})
}
closePane = (paneKey) => {
this.setState(({ ...state }) => {
if (paneKey === state.focusingPaneKey) {
const paneKeyIndex = state.openingPaneKeys.indexOf(paneKey)
state.focusingPaneKey = state.openingPaneKeys[paneKeyIndex - 1]
}
state.openingPaneKeys = state.openingPaneKeys.filter((openingPaneKey) => openingPaneKey !== paneKey)
return state
})
}
handleTabsEdit = (key, action) => {
if (action === 'remove') {
this.closePane(key)
}
}
render() {
const { panes } = this.props
const keysOfPane = Object.keys(panes)
return (
<div className="tab-section">
<div style={{ marginBottom: 16 }}>
{keysOfPane.map((key) => (
<Button key={key} onClick={() => this.openPane(key)}>
ADD Tab-{key}
</Button>
))}
</div>
<Tabs
hideAdd
onChange={this.openPane}
activeKey={this.state.focusingPaneKey}
type="editable-card"
onEdit={this.handleTabsEdit}
>
{this.state.openingPaneKeys
.map((key) => panes[key])
.map((pane) => (
<TabPane tab={pane.title} key={pane.key}>
{pane.content}
</TabPane>
))}
</Tabs>
</div>
)
}
}
const panes = {
1: { key: '1', title: 'Tab 1', content: 'Content of Tab Pane 1' },
2: { key: '2', title: 'Tab 2', content: 'Content of Tab Pane 2' },
3: { key: '3', title: 'Tab 3', content: 'Content of Tab Pane 3' },
}
ReactDOM.render(<App panes={panes} />, document.getElementById('container'))The issue is in types of openingPaneKeys array. You need to make the below change in your code.
this.state = {
focusingPaneKey: '1',
openingPaneKeys: ['1'],
}
}
When you are checking !state.openingPaneKeys.includes(paneKey), here paneKey is a string(i.e "1") but state.openingPaneKeys had [1] (a number). As 1 is not same "1" it returned false in your case.
Full working code at fiddle - https://jsfiddle.net/1gpLc9tn/