Print Page - [SOLVED] dynamically add tab panel using reactJs

Title: [SOLVED] dynamically add tab panel using reactJs
Post by: lintang on April 04, 2019, 04:11:30 AM

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.

Title: Re: dynamically add tab panel using reactJs
Post by: stworthy on April 04, 2019, 06:37:16 PM

Please refer the code below:

Code:

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

Title: Re: dynamically add tab panel using reactJs
Post by: lintang on April 06, 2019, 01:30:31 AM

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

Title: Re: dynamically add tab panel using reactJs
Post by: stworthy on April 06, 2019, 01:58:34 AM

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})
}

Title: Re: dynamically add tab panel using reactJs
Post by: lintang on April 07, 2019, 04:49:32 PM

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

EasyUI Forum

General Category => EasyUI for React => Topic started by: lintang on April 04, 2019, 04:11:30 AM