Load content through post in React Accordion component

30 Jan 20237 minutes to read

Accordion supports to load external contents through AJAX library. Refer the below steps.

  • Import the Ajax module from ej2-base and initialize with URL path.

  • Get data from the Ajax Success event to initialize Accordion with retrieved external path data.

import { useState, useEffect } from "react";
import { Ajax } from "@syncfusion/ej2-base";
import ReactDOM from "react-dom";
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from "@syncfusion/ej2-react-navigations";

const ReactApp = () => {
  const [employeeDetails, setEmployeeDetails] = useState("");

  useEffect(() => {
    const ajax = new Ajax("./ajax.html", "GET", true);
    ajax.send().then();
    ajax.onSuccess = (dataSt) => {
      setEmployeeDetails(dataSt);
    };
  }, []);

  const deptContent = () => {
    return (
      <div>
        <ul style=>
          <li>Testing</li>
          <li>Development</li>
        </ul>
      </div>
    );
  };

  const platformContent = () => {
    return (
      <div>
        <ul style=>
          <li>Mobile</li>
          <li>Web</li>
        </ul>
      </div>
    );
  };

  return (
    <AccordionComponent>
      <AccordionItemsDirective>
        <AccordionItemDirective header="Department" content={deptContent} />
        <AccordionItemDirective header="Platform" content={platformContent} />
        <AccordionItemDirective header="Employee Details" content={employeeDetails} />
      </AccordionItemsDirective>
    </AccordionComponent>
  );
};

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<ReactApp />);
import { useState, useEffect } from "react";
import { Ajax } from "@syncfusion/ej2-base";
import ReactDOM from "react-dom";
import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from "@syncfusion/ej2-react-navigations";

const ReactApp = () => {
  const [employeeDetails, setEmployeeDetails] = useState("");

  useEffect(() => {
    const ajax = new Ajax("./ajax.html", "GET", true);
    ajax.send().then();
    ajax.onSuccess = (dataSt: string): void => {
      setEmployeeDetails(dataSt);
    };
  }, []);

  const deptContent = () => {
    return (
      <div>
        <ul style=>
          <li>Testing</li>
          <li>Development</li>
        </ul>
      </div>
    );
  };

  const platformContent = () => {
    return (
      <div>
        <ul style=>
          <li>Mobile</li>
          <li>Web</li>
        </ul>
      </div>
    );
  };

  return (
    <AccordionComponent>
      <AccordionItemsDirective>
        <AccordionItemDirective header="Department" content={deptContent} />
        <AccordionItemDirective header="Platform" content={platformContent} />
        <AccordionItemDirective header="Employee Details" content={employeeDetails} />
      </AccordionItemsDirective>
    </AccordionComponent>
  );
};

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

<head>
    <title>Essential JS 2 Accordion Ajax 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/21.2.3/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%;
        }

        div#headername {
           margin-left: 100px;
        }
    </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>