Render other components in tab using template in React Tab component

13 Sep 202315 minutes to read

You can render other components inside Tab using React template. Through this, we can add content as other components directly with all functionalities to our Tab. Follow the below guidelines for using the other components as template in tab.

  • Declare a template within the function returns jsx element. If the template does not need arguments no need to pass the properties.

  • Assign the function as value for the template property.

To quickly get started with integrating UI components inside the React Tabs component, you can check out this video:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent, CalendarComponent } from '@syncfusion/ej2-react-calendars';
const App = () => {
    let headertext;
    const buttonTemplate =  () => {
        return (<ButtonComponent>Click me</ButtonComponent>);
    }
    const datePickerTemplate = () => {
        return (<DatePickerComponent></DatePickerComponent>);
    }
    const calendarTemplate = () => {
        return (<CalendarComponent></CalendarComponent>);
    }
    headertext = [{ text: "ButtonComponent" }, { text: "DatePickerComponent" }, { text: "CalendarComponent" }];
    return (<div id='container'>
      <TabComponent heightAdjustMode='Auto' id='tabelement'>
        <TabItemsDirective>
          <TabItemDirective header={headertext[0]} content={buttonTemplate}/>
          <TabItemDirective header={headertext[1]} content={datePickerTemplate}/>
          <TabItemDirective header={headertext[2]} content={calendarTemplate}/>
        </TabItemsDirective>
      </TabComponent>
    </div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DatePickerComponent, CalendarComponent } from '@syncfusion/ej2-react-calendars';

const App = () => {
  let headertext: any;
  const buttonTemplate = (): JSX.Element => {
    return (<ButtonComponent>Click me</ButtonComponent>);
  }
  const datePickerTemplate = (): JSX.Element => {
    return (<DatePickerComponent></DatePickerComponent>);
  }
  const calenderTemplate = (): JSX.Element => {
    return (<CalendarComponent ></CalendarComponent>);
  }
  headertext = [{ text: "ButtonComponent" }, { text: "DatePickerComponent" }, { text: "CalendarComponent" }];
  return (
    <div id='container'>
      <TabComponent heightAdjustMode='Auto' id='tabelement'>
        <TabItemsDirective>
          <TabItemDirective header={headertext[0]}
            content={buttonTemplate} />
          <TabItemDirective header={headertext[1]}
            content={datePickerTemplate} />
          <TabItemDirective header={headertext[2]}
            content={calenderTemplate} />
        </TabItemsDirective>
      </TabComponent>
    </div>
  );

}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Tab</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='container'>
        <div id='element'>
            <div id='loader'>Loading</div>
        </div>
    </div>
</body>

</html>

Passing props

The following code example demonstrates how to use props when rendering other components in tab component.

import { useRef, useState } from "react";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { enableRipple } from "@syncfusion/ej2-base";
import {
  TabComponent,
  TabItemDirective,
  TabItemsDirective,
  ContextMenuComponent
} from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import {
  DatePickerComponent,
  CalendarComponent
} from "@syncfusion/ej2-react-calendars";
enableRipple(true);
const App = () => {
  const conTextMenuRef = useRef(null);
  const [menuItems] = useState([{ text: "Cut" }, { text: "Copy" }, { text: "Paste" }]);
  const btnClick = () => {
    conTextMenuRef.current.open(80, 20);
  }
  let headertext;
  const conTextTemplate = () => {
    return (
      <div>
        <ContextMenuComponent
          id="contextmenu"
          ref={conTextMenuRef}
          items={menuItems}
        />
        <ButtonComponent onClick={btnClick}>Click me</ButtonComponent>
      </div>
    );
  }
  const datePickerTemplate = () => {
    return <DatePickerComponent />;
  }
  const calenderTemplate = () => {
    return <CalendarComponent />;
  }
  headertext = [{ text: "ContextMenuComponent" }, { text: "DatePickerComponent" }, { text: "CalendarComponent" }];
  return (
    <div id="container">
      <TabComponent heightAdjustMode="Auto" id="tabelement">
        <TabItemsDirective>
          <TabItemDirective
            header={headertext[0]}
            content={conTextTemplate}
          />
          <TabItemDirective
            header={headertext[1]}
            content={datePickerTemplate}
          />
          <TabItemDirective
            header={headertext[2]}
            content={calenderTemplate}
          />
        </TabItemsDirective>
      </TabComponent>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
import { useRef, useState } from "react";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { enableRipple } from "@syncfusion/ej2-base";
import {
  TabComponent,
  TabItemDirective,
  TabItemsDirective,
  ContextMenuComponent
} from "@syncfusion/ej2-react-navigations";
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import {
  DatePickerComponent,
  CalendarComponent
} from "@syncfusion/ej2-react-calendars";
enableRipple(true);
const App = () => {
  const conTextMenuRef = useRef<ContextMenuComponent>(null);
  const [menuItems] = useState([{ text: "Cut" }, { text: "Copy" }, { text: "Paste" }]);
  const btnClick = () => {
    conTextMenuRef.current.open(80, 20);
  }
  let headertext;
  const conTextTemplate = () => {
    return (
      <div>
        <ContextMenuComponent
          id="contextmenu"
          ref={conTextMenuRef}
          items={menuItems}
        />
        <ButtonComponent onClick={btnClick}>Click me</ButtonComponent>
      </div>
    );
  }
  const datePickerTemplate = () => {
    return <DatePickerComponent />;
  }
  const calenderTemplate = () => {
    return <CalendarComponent />;
  }
  headertext = [{ text: "ContextMenuComponent" }, { text: "DatePickerComponent" }, { text: "CalendarComponent" }];
  return (
    <div id="container">
      <TabComponent heightAdjustMode="Auto" id="tabelement">
        <TabItemsDirective>
          <TabItemDirective
            header={headertext[0]}
            content={conTextTemplate}
          />
          <TabItemDirective
            header={headertext[1]}
            content={datePickerTemplate}
          />
          <TabItemDirective
            header={headertext[2]}
            content={calenderTemplate}
          />
        </TabItemsDirective>
      </TabComponent>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Tab</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='container'>
        <div id='element'>
            <div id='loader'>Loading</div>
        </div>
    </div>
</body>

</html>