I would like to Render nested Array of objects in parent-child relationship as a tree in React Js

Question

I would like to render this array of objects as an expandable tree in reactJS. On the nodes expand to show the children on click.

The data below is just a snippet of a very nested array.

const familiy =[
{
  //
  "data": {"id":"John", "age": 90},
  "children": [
    {
      "data": {"id":"Mary", "age": 60},
      "children": [
        {"data": {"id":"Mercy", "age": 45}} 
      ]
    },
    {
      "data": {"id":"Paul", "age": 60}
    },
    {
      "data": {"id":"Dolores", "age": 55}
    },
  ],
};
]


[The result should look something like this][1]


  [1]: https://i.sstatic.net/4frB0.png

Answer 1

You can use something like this:

class App extends React.Component {
    render() {
const familiy = [
    {
      data: { id: "John", age: 90 },
      children: [
        {
          data: { id: "Mary", age: 60 },
          children: [{ data: { id: "Mercy", age: 45 } }],
        },
        {
          data: { id: "Paul", age: 60 },
        },
        {
          data: { id: "Dolores", age: 55 },
        },
      ],
    }
  ];

  const renderChildren = (v) => {
    return (
      <li key={v.data.id}>
        {v.data.id}, Age: {v.data.age}
        <ul>
          {v.children &&
            v.children.map((v2) => {
              return renderChildren(v2);
            })}
        </ul>
      </li>
    );
  };

  return (
    <div>
      <h1>Parent Child Tree</h1>
      <div>Render nested array of objects of parent-child relationship as a tree</div>
      <ul>
            {familiy.map((v) => {
              return renderChildren(v);
            })}
          </ul>
    </div>
  );
    }
}

// Render it
ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>