Load accordion with data source in React Accordion component

29 Aug 20237 minutes to read

You can bind any data object to Accordion items, by mapping it to header and content property.

In the below demo, Data is fetched from an OData service using DataManager. The result data is formatted as a JSON object with header and content fields, which is set to items property of Accordion.

import * as React from "react";
import { useEffect, useState } from "react";
import * as ReactDOM from "react-dom";
import { DataManager, Query, ODataV4Adaptor } from '@syncfusion/ej2-data';
import { AccordionComponent } from '@syncfusion/ej2-react-navigations';

const SERVICE_URI = 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees';

const ReactApp = () => {
  const [acrdnInstance, setAcrdnInstance] = useState(null);

  useEffect(() => {
    if (acrdnInstance) {
      new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor() })
        .executeQuery(new Query().range(1, 4)).then((e) => {
          let itemsData = [];
          let result = e.result;
          let mapping = { header: 'FirstName', content: 'Notes' };
          for (let i = 0; i < result.length; i++) {
            itemsData.push({ header: result[i][mapping.header], content: result[i][mapping.content] });
          }
          acrdnInstance.items = itemsData;
          acrdnInstance.refresh();
        });
    }
  }, [acrdnInstance]);

  const accordCreated = (acrdn) => {
    setAcrdnInstance(acrdn);
  };

  return (
    <AccordionComponent ref={(acrdn) => { setAcrdnInstance(acrdn) }} created={accordCreated}>
    </AccordionComponent>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<ReactApp />);
import * as React from "react";
import { useEffect, useState } from "react";
import * as ReactDOM from "react-dom";
import { DataManager, Query, ODataV4Adaptor, ReturnOption } from '@syncfusion/ej2-data';
import { AccordionComponent } from '@syncfusion/ej2-react-navigations';

const SERVICE_URI: string = 'https://services.odata.org/V4/Northwind/Northwind.svc/Employees';

const ReactApp = () => {
  const [acrdnInstance, setAcrdnInstance] = useState(null);
  useEffect(() => {
    if (acrdnInstance) {
      new DataManager({ url: SERVICE_URI, adaptor: new ODataV4Adaptor() })
        .executeQuery(new Query().range(1, 4)).then((e: ReturnOption) => {
          let itemsData: Object[] = [];
          let result: any = e.result;
          let mapping = { header: 'FirstName', content: 'Notes' };
          for (let i: number = 0; i < result.length; i++) {
            itemsData.push({ header: result[i][mapping.header], content: result[i][mapping.content] });
          }
          acrdnInstance.items = itemsData;
          acrdnInstance.refresh();
        });
    }
  }, [acrdnInstance]);
  const accordCreated = (acrdn: AccordionComponent): void => {
    setAcrdnInstance(acrdn);
  };

  return (
    <AccordionComponent ref={(acrdn) => { setAcrdnInstance(acrdn) }} created={accordCreated}>
    </AccordionComponent>
  );
}

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

<head>
    <title>Essential JS 2 React Accordion Sample</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/27.1.48/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element'>
        <div id='loader'>Loading....</div></div>
</body>
</html>