How to recursively render nested arrays?

Question

recursion

There is the following structure:

[{
        "id": "market-executive-summary",
        "title": "Executive Summary",
        "interactivity": false,
        "priceFactor": 2,
        "children": [{
            "id": "market-executive-summary-overview",
            "title": "Overview",
            "interactivity": false,
            "priceFactor": 0,
            "children": []
        }, {
            "id": "market-executive-summary-key-findings",
            "title": "Key Findings",
            "interactivity": false,
            "priceFactor": 0,
            "children": []
        }, {
            "id": "market-executive-summary-conclusions-implications",
            "title": "Conclusions & Implications",
            "interactivity": false,
            "priceFactor": 0,
            "children": []
        }]
    },
    {
        "id": "market-definitions-segmentation",
        "title": "Definitions & Segmentation",
        "interactivity": false,
        "priceFactor": 2,
        "children": [{
            "id": "market-definitions-segmentation-definitions",
            "title": "Definitions",
            "interactivity": false,
            "priceFactor": 0,
            "children": []
        }]
    }
]

I need to recursively render children as a tree may be built in the future.

Now I have this:

{tags?.map((tag: IPresetTag) => (
          <PresetTags {...tag} />
 ))}

export const PresetTags = ({ title, interactivity, children }: IPresetTag) => {
  return (
    <Accordion title={title} interactivity={interactivity}>
      <List>
        {children.map((tag: IPresetTag) => (
          <PresetTagContent button key={tag.id}>
            <CheckMark />
            <ListItemText>{tag.title}</ListItemText>
          </PresetTagContent>
        ))}
      </List>
    </Accordion>
  );
};

Answer 1

It is better to implement recursion directly on the components -
https://codesandbox.io/s/silly-ramanujan-3giij?fil...

import React from "react";
import "./styles.css";

const data = [{
        "id": "market-executive-summary",
        "title": "Executive Summary",
        "interactivity": false,
        "priceFactor": 2,
        "children": [{
            "id": "market-executive-summary-overview",
            "title": "Overview",
            "interactivity": false,
            "priceFactor": 0,
            "children": []
        }, {
            "id": "market-executive-summary-key-findings",
            "title": "Key Findings",
            "interactivity": false,
            "priceFactor": 0,
            "children": []
        }, {
            "id": "market-executive-summary-conclusions-implications",
            "title": "Conclusions & Implications",
            "interactivity": false,
            "priceFactor": 0,
            "children": []
        }]
    },
    {
        "id": "market-definitions-segmentation",
        "title": "Definitions & Segmentation",
        "interactivity": false,
        "priceFactor": 2,
        "children": [{
            "id": "market-definitions-segmentation-definitions",
            "title": "Definitions",
            "interactivity": false,
            "priceFactor": 0,
            "children": []
        }]
    }
]

const List = ({data}) => {
  let children = data.map(data => <Item {...data}/>)
  
  return (
    <ul id>
      {children}
    </ul>
  );
}
const Item = ({id, title, children}) => {
  let list = children.length ? <List data={children}/> : null;
  
  return (
    <li>
      <span>{title}</span>
      {list}
    </li>
  );
}

export default function App() {
  return (
    <List data={data}/>
  );
}