Render other components in accordion using template in React Accordion component

30 Jan 202314 minutes to read
You can render other components inside Accordion using React template. Through this, we can add content as other components directly with all functionalities to our Accordion. Follow the below guidelines for using the other components as template in Accordion.
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.
index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { DatePickerComponent, CalendarComponent } from '@syncfusion/ej2-react-calendars';


const App = () => {

  const continents = [
    {
      code: 'AF', name: 'Africa', countries: [
        { code: 'NGA', name: 'Nigeria' },
        { code: 'EGY', name: 'Egypt' },
        { code: 'ZAF', name: 'South Africa' }
      ]
    },
    {
      code: 'AS', name: 'Asia', expanded: true, countries: [
        { code: 'CHN', name: 'China' },
        { code: 'IND', name: 'India', selected: true },
        { code: 'JPN', name: 'Japan' }
      ]
    },
    {
      code: 'EU', name: 'Europe', countries: [
        { code: 'DNK', name: 'Denmark' },
        { code: 'FIN', name: 'Finland' },
        { code: 'AUT', name: 'Austria' }
      ]
    },
    {
      code: 'NA', name: 'North America', countries: [
        { code: 'USA', name: 'United States of America' },
        { code: 'CUB', name: 'Cuba' },
        { code: 'MEX', name: 'Mexico' }
      ]
    },
    {
      code: 'SA', name: 'South America', countries: [
        { code: 'BRA', name: 'Brazil' },
        { code: 'COL', name: 'Colombia' },
        { code: 'ARG', name: 'Argentina' }
      ]
    },
    {
      code: 'OC', name: 'Oceania', countries: [
        { code: 'AUS', name: 'Australia' },
        { code: 'NZL', name: 'New Zealand' },
        { code: 'WSM', name: 'Samoa' }
      ]
    },
    {
      code: 'AN', name: 'Antarctica', countries: [
        { code: 'BVT', name: 'Bouvet Island' },
        { code: 'ATF', name: 'French Southern Lands' }
      ]
    },
  ];
  const field = { dataSource: continents, id: 'code', text: 'name', child: 'countries' }

  const buttonTemplate = () => {
    return (<ButtonComponent>Click me</ButtonComponent>);
  }
  const datePickerTemplate = () => {
    return (<DatePickerComponent></DatePickerComponent>);
  }
  const calendarTemplate = () => {
    return (<CalendarComponent ></CalendarComponent>);
  }
  const treeViewTemplate = () => {
    return (<TreeViewComponent fields={field}></TreeViewComponent>);
  }
  return (
    <div id='container'>
      <AccordionComponent>
        <AccordionItemsDirective>
          <AccordionItemDirective header='Button' content={buttonTemplate} />
          <AccordionItemDirective header='DatePicker' content={datePickerTemplate} />
          <AccordionItemDirective header='Calendar' content={calendarTemplate} />
          <AccordionItemDirective header='Treeview' content={treeViewTemplate} />
        </AccordionItemsDirective>
      </AccordionComponent>
    </div>
  );
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { DatePickerComponent, CalendarComponent } from '@syncfusion/ej2-react-calendars';


const App = () => {

  const continents: { [key: string]: Object }[] = [
    {
      code: 'AF', name: 'Africa', countries: [
        { code: 'NGA', name: 'Nigeria' },
        { code: 'EGY', name: 'Egypt' },
        { code: 'ZAF', name: 'South Africa' }
      ]
    },
    {
      code: 'AS', name: 'Asia', expanded: true, countries: [
        { code: 'CHN', name: 'China' },
        { code: 'IND', name: 'India', selected: true },
        { code: 'JPN', name: 'Japan' }
      ]
    },
    {
      code: 'EU', name: 'Europe', countries: [
        { code: 'DNK', name: 'Denmark' },
        { code: 'FIN', name: 'Finland' },
        { code: 'AUT', name: 'Austria' }
      ]
    },
    {
      code: 'NA', name: 'North America', countries: [
        { code: 'USA', name: 'United States of America' },
        { code: 'CUB', name: 'Cuba' },
        { code: 'MEX', name: 'Mexico' }
      ]
    },
    {
      code: 'SA', name: 'South America', countries: [
        { code: 'BRA', name: 'Brazil' },
        { code: 'COL', name: 'Colombia' },
        { code: 'ARG', name: 'Argentina' }
      ]
    },
    {
      code: 'OC', name: 'Oceania', countries: [
        { code: 'AUS', name: 'Australia' },
        { code: 'NZL', name: 'New Zealand' },
        { code: 'WSM', name: 'Samoa' }
      ]
    },
    {
      code: 'AN', name: 'Antarctica', countries: [
        { code: 'BVT', name: 'Bouvet Island' },
        { code: 'ATF', name: 'French Southern Lands' }
      ]
    },
  ];
  const field: object = { dataSource: continents, id: 'code', text: 'name', child: 'countries' }

  const buttonTemplate = (): JSX.Element => {
    return (<ButtonComponent>Click me</ButtonComponent>);
  }
  const datePickerTemplate = (): JSX.Element => {
    return (<DatePickerComponent></DatePickerComponent>);
  }
  const calenderTemplate = (): JSX.Element => {
    return (<CalendarComponent ></CalendarComponent>);
  }
  const treeViewTemplate4 = (): JSX.Element => {
    return (<TreeViewComponent fields={field}></TreeViewComponent>);
  }
  return (
    <div id='container'>
      <AccordionComponent>
        <AccordionItemsDirective>
          <AccordionItemDirective header='Button' content={buttonTemplate} />
          <AccordionItemDirective header='DatePicker' content={datePickerTemplate} />
          <AccordionItemDirective header='Calendar' content={calenderTemplate} />
          <AccordionItemDirective header='Treeview' content={treeViewTemplate4} />
        </AccordionItemsDirective>
      </AccordionComponent>
    </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>