ReactJS render dynamic nested arrays of data

Question

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

gmoniava · Accepted Answer · 2022-12-30 21:29:16Z

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>
  );
}

moonwave99 · Accepted Answer · 2022-12-30 21:20:20Z

2

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>
  );
}

answered Dec 30, 2022 at 21:20

moonwave99

22.9k3 gold badges48 silver badges71 bronze badges

Comments

Konrad · Accepted Answer · 2022-12-30 21:16:18Z

1

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} />)}

answered Dec 30, 2022 at 21:16

Konrad

24.9k5 gold badges35 silver badges78 bronze badges

Collectives™ on Stack Overflow

ReactJS render dynamic nested arrays of data

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related