I want to automatically open Tab 1. Making Tab 1 as default Tab that opens as soon as we run the code. I have used Ant Design library for creating this tab section. There is something called defaultActiveTab in Ant-tabs that would work as initial active tab on running.

Even though I have mentioned Tab 1 as defaultActiveTab, it isn't working.

I want Tab 1 to be default and all the other tabs should pop only after clicking the Add button. I have attached the link below

const { Tabs, Button } = antd
const { TabPane } = Tabs

class App extends React.Component {
constructor(props) {
super(props)

this.state = {
  focusingPaneKey: '',
  openingPaneKeys: [],
}
}

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}
      defaultActiveKey="1"
    >
      {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' },
 }

https://jsfiddle.net/6719phr3/1/