Recursive React component in Typescript

#react #typescript #recursive

The titel says it all. A colluege wanted to know how to write a Recursive React component in Typescript. So i wrote a simple one with infinite depth.

	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;