Antd-demo

HTML

<script src="https://npmcdn.com/antd/dist/antd.js"></script>
<link rel="stylesheet" href="https://npmcdn.com/antd/dist/antd.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-is/17.0.2/umd/react-is.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="container" />

CSS

.row {
	line-height: 1.5;
	color: #0097da;
}
.label {
  color: #f60;
}
.value {
  font-weight: bold;
}

.component {
	margin-top: 5px;
	padding: 10px;
	background-color: rgba(204, 228, 246, 0.37)
}

React

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',...