Default Tab is adding twice in React JS-CodePudding

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.

CodePudding user response：

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/zs8ty3fc/1/