React Typescript - Recursive component

react-ts-recursive.js

import React, { useState } from "react";

type ItemType = {
  id: Number;
  title: String;
  children: Array<Number>;
};

// Each "ItemType" element in the array have a array of children ID's. These refer
// to a ItemType.
// = This has a infinite depth.
const items: ItemType[] = [
  { id: 1, title: "Item 1", children: [2, 3, 4] },
  { id: 2, title: "Item 2", children: [1, 3, 4] },
  { id: 3, title: "Item 3", children: [1, 2, 4] },
  { id: 4, title: "Item 3", children: [1, 2, 3] }
];

function Item({ title, children }: ItemType): JSX.Element {
  const [open, toggle] = useState(false);

  // Given the children array with IDs, find each Item we refer to
  const childElements = children.map(findChild) as ItemType[];

  return (
    <div>
      <h6>
        {title} children <button onClick={() => toggle(!open)}>Open</button>
      </h6>
      <ul>
        {/* Loop children and run recursive */}
        {open &&
          childElements.map((child: ItemType) => (
            <li>
              <div>Child: {child.title}</div>
              <Item {...child} />
            </li>
          ))}
      </ul>
    </div>
  );
}

function App() {
  return (
    <div>
      {/* Start by iterating over all items */}
      {items.map(item => (
        <Item {...item} />
      ))}
    </div>
  );
}

// Function to find a Item by child id.
function findChild(childId: Number): ItemType | undefined {
  return items.find(({ id }) => id === childId);
}

export default App;