DEV Community

Martin Lindgren
Martin Lindgren

Posted on

2

Recursive React component in Typescript

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;

Might be usefull for someone.

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs