[SOLVED] dynamically add tab panel using reactJs

[lintang]

i build application using reactJs and EasyUi using meteorJs framework.
i create dynamic sidebar menu with tree. but i'am very confused how to add new tab using on click event i build.

[stworthy]

Please refer the code below:

Code:

<Tabs style={{height:250}}>
{
  this.state.data.map((tab,index) => (
    <TabPanel key={index} {...tab}>...</TabPanel>
  ))
}
</Tabs>

[lintang]

thanks for your answer, and I was follow your code 

Code:

import React, { Component } from 'react';
import { Tabs, TabPanel } from 'rc-easyui';
import { render } from 'react-dom';

var data = [];
class TabContent extends Component {

  constructor(props){
    super(props);
    this.state = {
        data: [
          {
            title: 'Tab1',
            content: 'Content1'
          },{
            title: 'Tab2',
            content: 'Content2'
          },{
            title: 'Tab3',
            content: 'Content3'
          }
        ]
    };
  }


  handleAddTab(elem) {
      /* action ketika action menu true */
      this.state = {
          data: [
            {
              title: 'Tab1',
              content: 'Content1'
            },{
              title: 'Tab2',
              content: 'Content2'
            },{
              title: 'Tab3',
              content: 'Content3'
            },{
              title: 'Tab4',
              content: 'Content4'
            }
          ]
      };
  }

  render() {
    return (
        <Tabs id="tabpanel" scrollable style={{ width: '100%', height: '100%' }} justified>
        {
          this.state.data.map((tab,index) => (
            <TabPanel key={index} {...tab}>...</TabPanel>
          ))
        }
        </Tabs>
    );
  }
}

module.exports = TabContent;

Sorry this is my code. I'am new in react
handleAddTab is function will called from my sidebar file, I try to change data array with new data but its not got effect on my tabpanel

And, Please give me scrypt for render from other file imported on this tabpanel, Thank you very much

[stworthy]

This is the code to append a new TabPanel component.

Code:

handleAddTab(){
  let data = this.state.data.slice();
  data.push({
    title: 'new title',
    content: 'new content'
  })
  this.setState({data:data})
}

[lintang]

wuww ok thank you sir, i have problem with setstate. but i can fix it.
thanks you veey much