RecursiveList.jsx

import React from "react";

const listData = [
  "First Item",
  "Second Item",
  "Third Item",
  { "Fourth Item": ["First Nested Item", "Second Nested Item"] },
  "Fifth Nested Item",
];

function App() {
  return <RecursiveList listData={listData} />;
}

const RecursiveList = ({ listData }) => {
  return (
    <ul>
      {listData.map((item) => {
        if (typeof item === "string") {
          return <li>{item}</li>;
        } else {
          const [[listItem, subItems]] = Object.entries(item);
          return (
            <li>
              {listItem}
              <RecursiveList listData={subItems} />
            </li>
          );
        }
      })}
    </ul>
  );
};
export default App;