Adding dynamic items with content reuse in React Tab component

28 Feb 202313 minutes to read

You can add dynamic tabs by reusing the content using React template. Tabs can be added dynamically by passing array of items and index value to the addTab method.

Content reuse can be achieved by using the following steps:

1. Declare a template within the function returns jsx element. If the template does not need arguments no need to pass the properties.
2. Assign the function as value for the template property.
3. Provide separate template declaration for each react component and pass content by dynamically adding tab. It will reuse the content of react component.

Refer to the following sample.

index.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
function App() {
    let tabObj;
    function Dropdown(props) {
        let target = document.querySelector('.e-toolbar-item.e-active .e-tab-text')
            .innerHTML;
        return (<div>
            <h1>{target} Content</h1>
            <br />
            <DropDownListComponent dataSource={props.data} placeholder="Select a game" />
        </div>);
    }
    const addButtonClicked = (e) => {
        const newTabItem = [
            {
                header: { text: 'DynamicTabItem' },
                content: thirdDropdownTemplate
            }
        ];
        tabObj.addTab(newTabItem, 1);
    };
    const removeButtonClicked = (e) => {
        tabObj.removeTab(1);
    };
    function firstDropdownTemplate() {
        let sportsData = [
            'Badminton',
            'Basketball',
            'Cricket',
            'Golf',
            'Hockey',
            'Rugby'
        ];
        return <Dropdown data={sportsData} />;
    }
    function secondDropdownTemplate() {
        let sportsData = [
            'Cricket',
            'Golf',
            'Hockey',
            'Rugby',
            'Badminton',
            'Basketball'
        ];
        return <Dropdown data={sportsData} />;
    }
    function thirdDropdownTemplate() {
        let sportsData = [
            'Rugby',
            'Badminton',
            'Basketball',
            'Cricket',
            'Golf',
            'Hockey'
        ];
        return <Dropdown data={sportsData} />;
    }
    function datePickerTemplate() {
        let target = document.querySelector('.e-toolbar-item.e-active .e-tab-text')
            .innerHTML;
        return (<div>
            <h1>{target} Content</h1>
            <br />
            <DatePickerComponent />
        </div>);
    }
    let tabItemsHeaderText = [
        { text: 'DatePicker' },
        { text: 'Dropdown' },
        { text: 'Reused Dropdown' }
    ];
    return (<div id='container'>
        <button id="add" className="e-btn" onClick={addButtonClicked}>
            Click to add
        </button>
        <button id="remove" className="e-btn" onClick={removeButtonClicked}>
            Click to remove
        </button>
        <TabComponent id="tabElement" ref={tab => {
            tabObj = tab;
        }}>
            <TabItemsDirective>
                <TabItemDirective header={tabItemsHeaderText[0]} content={datePickerTemplate} />
                <TabItemDirective header={tabItemsHeaderText[1]} content={firstDropdownTemplate} />
                <TabItemDirective header={tabItemsHeaderText[2]} content={secondDropdownTemplate} />
            </TabItemsDirective>
        </TabComponent>
    </div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';

function App() {
  let tabObj: TabComponent;
  function Dropdown(props) {
    let target = document.querySelector('.e-toolbar-item.e-active .e-tab-text')
      .innerHTML;
    return (
      <div>
        <h1>{target} Content</h1>
        <br />
        <DropDownListComponent
          dataSource={props.data}
          placeholder="Select a game"
        />
      </div>
    );
  }
  const addButtonClicked = (e: any): void => {
    const newTabItem = [
      {
        header: { text: 'DynamicTabItem' },
        content: thirdDropdownTemplate
      }
    ];
    tabObj.addTab(newTabItem as any, 1);
  }

  const removeButtonClicked = (e: any): void => {
    tabObj.removeTab(1);
  }

  function firstDropdownTemplate() {
    let sportsData = [
      'Badminton',
      'Basketball',
      'Cricket',
      'Golf',
      'Hockey',
      'Rugby'
    ];
    return <Dropdown data={sportsData} />;
  }

  function secondDropdownTemplate() {
    let sportsData = [
      'Cricket',
      'Golf',
      'Hockey',
      'Rugby',
      'Badminton',
      'Basketball'
    ];
    return <Dropdown data={sportsData} />;
  }

  function thirdDropdownTemplate() {
    let sportsData = [
      'Rugby',
      'Badminton',
      'Basketball',
      'Cricket',
      'Golf',
      'Hockey'
    ];
    return <Dropdown data={sportsData} />;
  }

  function datePickerTemplate() {
    let target: string = document.querySelector('.e-toolbar-item.e-active .e-tab-text')
      .innerHTML;
    return (
      <div>
        <h1>{target} Content</h1>
        <br />
        <DatePickerComponent />
      </div>
    );
  }

  let tabItemsHeaderText: any = [
    { text: 'DatePicker' },
    { text: 'Dropdown' },
    { text: 'Reused Dropdown' }
  ];
  return (
    <div id='container'>
      <button
        id="add"
        className="e-btn"
        onClick={addButtonClicked}
      >
        Click to add
      </button>
      <button
        id="remove"
        className="e-btn"
        onClick={removeButtonClicked}
      >
        Click to remove
      </button>
      <TabComponent
        id="tabElement"
        ref={tab => {
          tabObj = tab;
        }}
      >
        <TabItemsDirective>
          <TabItemDirective
            header={tabItemsHeaderText[0]}
            content={datePickerTemplate}
          />
          <TabItemDirective
            header={tabItemsHeaderText[1]}
            content={firstDropdownTemplate}
          />
          <TabItemDirective
            header={tabItemsHeaderText[2]}
            content={secondDropdownTemplate}
          />
        </TabItemsDirective>
      </TabComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);