How can i render dynamic nested data in ReactJS? This array sample contains nested childs, each item have the same structure. There is a way to render this data recursively?

function App () {
  const [data, setData] = useState([
    {
      id: '1',
      name: 'demo1',
      programParent: '',
      childs: [
        {
          id: '2',
          name: 'dem2',
          programParent: '1',
          childs: [
            {
              id: '4',
              name: 'demo4',
              programParent: '2',
              childs: [
                {
                  id: '5',
                  name: 'demo5',
                  programParent: '4'
                }
              ]
            }
          ]
        },
        {
          id: '3',
          name: 'demo3',
          programParent: '1'
        }
      ]
    },
    {
      id: '6',
      name: 'demo6',
      programParent: ''
    }
  ])

  return (
    <>
      <div>
        {
          data.length &&
          data.map(item => (
            <div key={item.id}>
              <h3>{item.name}</h3>
              {
                item.childs?.length && (
                  item.childs.map(child => (
                    <div key={child.id}>
                      <h4>-{child.name}</h4>
                      {
                        child.childs?.length && (
                          child.childs.map(childChild => (
                            <div key={childChild.id}>
                              <h5>--{childChild.name}</h5>
                            </div>
                          ))
                        )
                      }
                    </div>
                  ))
                )
              }
            </div>
          ))
        }
      </div>
    </>
  )
}

export default App

CodePudding user response：

You will need to render them recursively. Here is something to give you an idea, you can further customize the rendering.

import React from 'react';
import './style.css';

let Tree = ({ data }) => {
  return (
    <div>
      {data.map((x) => {
        return (
          <div key={x.id}>
            {x.name}
            {!!x.childs?.length && (
              <div style={{ marginLeft: 10 }}>
                <Tree data={x.childs} />
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
};


export default function App() {
  const [data, setData] = React.useState([
    {
      id: '1',
      name: 'demo1',
      programParent: '',
      childs: [
        {
          id: '2',
          name: 'dem2',
          programParent: '1',
          childs: [
            {
              id: '4',
              name: 'demo4',
              programParent: '2',
              childs: [
                {
                  id: '5',
                  name: 'demo5',
                  programParent: '4',
                },
              ],
            },
          ],
        },
        {
          id: '3',
          name: 'demo3',
          programParent: '1',
        },
      ],
    },
    {
      id: '6',
      name: 'demo6',
      programParent: '',
    },
  ]);
  return (
    <div>
      <Tree data={data} />
    </div>
  );
}

CodePudding user response：

Yes, with a recursive component:

const data = [
  {
    id: "1",
    name: "demo1",
    programParent: "",
    childs: [
      {
        id: "2",
        name: "dem2",
        programParent: "1",
        childs: [...]
      },
      ...
    ]
  },
  ...
];

export default function App() {
  return <Node childs={data} name="root" />;
}

function Node({ childs, name }) {
  return (
    <div className="node">
      <h2>{name}</h2>
      {childs && childs.map((x) => <Node key={x.id} {...x} />)}
    </div>
  );
}

CodePudding user response：

I would use a custom component for that demo

const Component = ({ item, level }) => {
  const Heading = level <= 6 ? `h${level}` : "h6";
  return (
    <div>
      <Heading>{item.name}</Heading>
      {item.childs?.map((child) => (
        <Component item={child} level={level   1} />
      ))}
    </div>
  );
};

Usage

{data.length && data.map((item) => <Component item={item} level={1} />)}