Posted on Feb 2, 2023

How to make a recursive component with ReactJS ?

First of all, what is recursion ? Wikipedia say :

The most common application of recursion is in mathematics and computer science, where a function being defined is applied within its own definition. While this apparently defines an infinite number of instances (function values), it is often done in such a way that no infinite loop or infinite chain of references ("crock recursion") can occur.

If you need to create a tree of directory and folder, or need to parse and display deep tree of data, you are in the good place !

Imagine that we have this Recursive.tsx component :

import RecursiveChildren from "./RecursiveChildren"; function Recursive () { type ItemNode = { name: string; children?: ItemNode[]; }; const tree: ItemNode = { name: "tree", children: [ { name: "fruit", children: [ { name: "rouge", children: [ { name: "cassis", }, { name: "fraise", children: [ { name: "fraise des bois", }, { name: "fraise gariguette", }, ], }, ], }, ], }, { name: "legume", children: [ { name: "tubercule", children: [ { name: "oignon", }, { name: "pomme de terre", }, ], }, ], }, ], }; return ( <div style={{ textAlign: "left" }}> <RecursiveChildren name={tree.name} children={tree.children} marginLeft={0}/>  </div>  ) } export default Recursive;

As you can see, the tree data structure can have an infinite of children, so we need to implement a recursive component to browse the whole structure.

You can find a simple example below (RecursiveChildren.tsx):

type ItemNode = { name: string; children?: ItemNode[]; }; type Indentation = { marginLeft: number } function RecursiveChildren (props: ItemNode & Indentation) { if (props.children && props.children.length > 0) { return ( <div style={{ marginLeft: props.marginLeft }}> { props.name } { props.children.map(child => { return <RecursiveChildren name={child.name} children={child.children} marginLeft={ props.marginLeft + 20 }/>  })} </div>  ) } return ( <div>{ props.name }</div>  ) } export default RecursiveChildren;