How to make a recursive component with ReactJS ?

#react #typescript #programming

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;