Do not switch on a dynamically created tab with react.js

Question

I draw tabs bootstrap using react.js . And then I was at the event onСlick content first tab, I create another tab. But when I try to switch tabs, I do not see the contents of the dynamic creation of the tab.

I understand that is not assigned to the class of the class of active tab-pane. But I do not understand what I'm doing wrong? It is not dynamically created tabs are switched. What could be the problem?

Code on codepen: https://codepen.io/alex183/pen/apOKxP?editors=0010

class App extends React.Component {
   constructor(props) {
    super(props);
    this.state = { 
      newTab:false, id:'', name:'', numTab:0,
      currentTab:"home",
    };
  }
  changeTab(e) {
     this.setState({ currentTab: e.target.getAttribute('aria-controls') });
  }
  render() {
    const tabs = [], tabsContent = [];
    for(let i=0; i < this.state.numTab; i+= 1){
      console.log('for->', this.state);
      let href = "#"+this.state.id;
      let tcClass = this.state.currentTab ==  this.state.id ? "tab-pane active" : "tab-pane";
      tabs.push(<li role="presentation"><a href={href} onClick={this.changeTab} aria-controls={this.state.id} role="tab" data-toggle="tab">{this.state.name}</a></li>);
      tabsContent.push(<div role="tabpanel" className="tab-pane active" id={this.state.id}>{this.state.id} - {this.state.name}</div>);
    }
    return( 
        <div>
          <ul className="nav nav-tabs" role="tablist">
            <li role="presentation" className="active"><a onClick={this.changeTab.bind(this)} href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
            <li role="presentation"><a href="#profile" onClick={this.changeTab.bind(this)} aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
            <li role="presentation"><a href="#mes" onClick={this.changeTab.bind(this)} aria-controls="mes" role="tab" data-toggle="tab">Mes</a></li>
            {tabs}           
          </ul>
          <div className="tab-content">
            <div role="tabpanel" className="tab-pane active" id="home"><h1 onClick={this.addTab.bind(this)} id="obj">123</h1></div>
            <div role="tabpanel" className="tab-pane" id="profile">456</div>
            <div role="tabpanel" className="tab-pane" id="mes">789</div>
            {tabsContent}
          </div>
        </div>
    );
  }
  addTab(e){
    let id = e.target.getAttribute('id');
    let name =  e.currentTarget.textContent;
    this.setState({newTab:true, id:id, name:name, numTab:this.state.numTab+1});
    console.log('addTab->', this.state);
  } 
}

React.render(<App />, document.body);

UPD

1. I just created three tabs, and they work fine.
2. I click on the contents of the first tab.
3. And dynamically creates another tab.
4. When I switch to the last created tab I can see the contents of the first tab how to fix it?

Answer 1

You have many problems in you code.

First, you can't use id of your h1 element to pass tab-content id to addTab , because the tab content must have a unique id . You can use data-attribute to pass data, or add arguments to your binding ( this.addTab.bind(this, "obj") ).

Here is your code corrected :

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
    newTab:false, id:'', name:'', numTab:0
  }
}
render() {
  const tabs = [], tabsContent = [];
  for(let i=0; i < this.state.numTab; i+= 1){
    console.log('for->', this.state);
    let href = "#"+this.state.id;
    tabs.push(<li role="presentation"><a href={href} onClick={this.changeTab} aria-controls={this.state.id} role="tab" data-toggle="tab">{this.state.name}</a></li>);
  tabsContent.push(<div role="tabpanel" className="tab-pane" id={this.state.id}>{this.state.id} - {this.state.name}</div>);
  }
  return( 
    <div>
      <ul className="nav nav-tabs" role="tablist">
        <li role="presentation" className="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#mes" aria-controls="mes" role="tab" data-toggle="tab">Mes</a></li>
        {tabs}           
      </ul>
      <div className="tab-content">
        <div role="tabpanel" className="tab-pane active" id="home">
          <h1 onClick={this.addTab.bind(this)} data-id="obj">Add new tab</h1>
        </div>
        <div role="tabpanel" className="tab-pane" id="profile">456</div>
        <div role="tabpanel" className="tab-pane" id="mes">789</div>
        {tabsContent}
      </div>
    </div>
    );
  }
  addTab(e){
    let id = e.currentTarget.dataset.id;
    let name =  e.currentTarget.textContent;
    this.setState({newTab:true, id:id, name:name, numTab:this.state.numTab+1});
    console.log('addTab->', this.state);
  } 
}

React.render(<App />, document.body);