Recursive Components

Introduction

According to the theory of computation, a recursive function is a function that solves a problem by dividing it into smaller cases and calling itself to solve those smaller cases. Each recursive call reduces the original problem into smaller subproblems, and the recursion continues until it reaches a base case, which is a condition that allows the function to stop calling itself.

The basic structure of a recursive function includes the definition of the base case and the recursive call. The base case is crucial to prevent infinite recursive calls and ensure that the recursion eventually reaches a termination point.

React

Within the React ecosystem, it is possible to develop recursive structures when declaring components, as long as one strictly adheres to the guidelines established by a base condition. This condition is essential to ensure that the component can complete its rendering cycle efficiently and without hindrances.

File Tree

In this flow, the rendering logic is adjusted based on the type of node encountered. If the node is an array, the TreeList component is called for each item in the array. If the node is an object, the component is called for each key-value pair, thus enabling the representation of directories and subdirectories. For each file node (leaf), the component renders the corresponding information.

file-tree.tsx

export const TreeList = ({ tree, path }: TreeProps) => {    const [display, setDisplay] = useState(true);    if (Array.isArray(tree)) {        return (            <ul className="pl-[1.5rem]">                {tree.map((value, index) => (                    <li key={index} className="relative">                        <TreeList onFileClick={onFileClick} tree={value} path={path || ''} />                    </li>                ))}            </ul>        );    }    if (typeof tree === 'object') {        return (            <ul>                {Object.entries(tree).map(([key, value]) => (                    <li key={key}>                        <button onClick={() => setDisplay((d) => !d)}>                             {key} {display ? '-' : '+'}                        </button>                        <div className={`${display ? 'block' : 'hidden'}`}>                            <TreeList onFileClick={onFileClick} tree={value} path={`${path}/${key}`} />                        </div>                    </li>                ))}            </ul>        );    }    return (        <span            data-path={`${path}/${tree}`}            onClick={() => onFileClickHandler(`${path}/${tree}`)}            className="relative font-mono flex items-center gap-2 cursor-pointer"        >           {tree}        </span>    );};

Experiment

file-tree.tsx

[{    "Charts": [        {            "nginx-dev":[                {                    "templates":[                        "deployment.yaml",                        "service.yaml"                    ]                },                "values.yaml"            ]        },        {            "nginx-prod":[                {                    "templates":[                        "deployment.yaml",                        "service.yaml"                    ]                },                "values.yaml"            ]        },    ],},    "Chart.yaml",    "values.yaml",]

• • Charts -
    • • nginx-dev -
        • • templates -
            • deployment.yaml
            • service.yaml
        • values.yaml
    • • nginx-prod -
        • • templates -
            • deployment.yaml
            • service.yaml
        • values.yaml
• Chart.yaml
• values.yaml

For more thoughts like thisJoin the community