Adding dynamic items with content reuse in React Tab component

29 Aug 202312 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 { useRef } from 'react';
import * as React from "react";
import * as ReactDOM from 'react-dom/client';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';

const App = () => {
  const tabObj = useRef(null);
  const Dropdown = (props) => {
    return (
      <div>
        <DropDownListComponent
          dataSource={props.data}
          placeholder="Select a game"
        />
      </div>
    );
  }
  const addButtonClicked = (e) => {
    const newTabItem = [
      {
        header: { text: 'DynamicTabItem' },
        content: thirdDropdownTemplate
      }
    ];
    tabObj.current.addTab(newTabItem, 1);
  }

  const removeButtonClicked = (e) => {
    tabObj.current.removeTab(1);
  }

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

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

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

  const datePickerTemplate = () => {
    return (
      <div>
        <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={tabObj}
      >
        <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 { useRef } from 'react';
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';

const App = () => {
  const tabObj = useRef<TabComponent>(null);
  const Dropdown = (props: any) => {
    return (
      <div>
        <DropDownListComponent
          dataSource={props.data}
          placeholder="Select a game"
        />
      </div>
    );
  }
  const addButtonClicked = (e: any): void => {
    const newTabItem = [
      {
        header: { text: 'DynamicTabItem' },
        content: thirdDropdownTemplate
      }
    ];
    tabObj.current.addTab(newTabItem as any, 1);
  }

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

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

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

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

  const datePickerTemplate = () => {
    return (
      <div>
        <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={tabObj}
      >
        <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 />);