Recursively map an array with unlimited number of nested arrays in React

Question

I have a huge set of data, basically a family tree ranging back to about 800 years old and have a lot of nested parent/child arrays.

I know .map method to loop over array/nested array to a limited size. However, how can thee code be minimalistic for mapping over nested arrays?

FYI: Its a react app.

Sample data:

const complete_date = [
    {
        "fullname": "some name",
        "dob": "",
        "children": [
          {
            "id": "someid",
            "fullname": "some name",
            "dob": "",
            "children": [
              {
                "id": "someid",
                "fullname": "some name",
                "dob": "",
                "children": [
                  {
                    "id": "someid",
                    "fullname": "some name",
                    "dob": "",
                    "children": [
                      {
                        "id": "someid",
                        "fullname": "some name",
                        "dob": "",
                        "children": [
                          {
                            "id": "someid",
                            "fullname": "some name",
                            "dob": ""
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "id": "someid",
                    "fullname": "some name",
                    "dob": "",
                    "children": [
                      {
                        "id": "someid",
                        "fullname": "some name",
                        "dob": "",
                        "children": [
                          {
                            "id": "someid",
                            "fullname": "some name",
                            "dob": ""
                          }
                        ]
                      }
                    ]
                  },
                  {
                    "id": "someid",
                    "fullname": "some name",
                    "dob": "",
                    "children": [
                      {
                        "id": "someid",
                        "fullname": "some name",
                        "dob": "",
                        "children": [
                          {
                            "id": "someid",
                            "fullname": "some name",
                            "dob": "",
                            "children": [
                              {
                                "id": "someid",
                                "fullname": "some name",
                                "dob": "",
                                "children": [
                                  {
                                    "id": "someid",
                                    "fullname": "some name",
                                    "dob": "",
                                    "children": [
                                      {
                                        "id": "someid",
                                        "fullname": "some name",
                                        "dob": "",
                                        "children": [
                                          {
                                            "id": "someid",
                                            "fullname": "some name",
                                            "dob": ""
                                          }
                                        ]
                                      }
                                    ]
                                  },
                                  {
                                    "id": "someid",
                                    "fullname": "some name",
                                    "dob": "",
                                    "children": [
                                      {
                                        "id": "someid",
                                        "fullname": "some name",
                                        "dob": "",
                                        "children": [
                                          {
                                            "id": "someid",
                                            "fullname": "some name",
                                            "dob": ""
                                          }
                                        ]
                                      }
                                    ]
                                  },
                                  {
                                    "id": "someid",
                                    "fullname": "some name",
                                    "dob": "",
                                    "children": [
                                      {
                                        "id": "someid",
                                        "fullname": "some name",
                                        "dob": "",
                                        "children": [
                                          {
                                            "id": "someid",
                                            "fullname": "some name",
                                            "dob": ""
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      },
                      {
                        "id": "someid",
                        "fullname": "some name",
                        "dob": "",
                        "children": [
                          {
                            "id": "someid",
                            "fullname": "some name",
                            "dob": "",
                            "children": [
                              {
                                "id": "someid",
                                "fullname": "some name",
                                "dob": ""
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        ]
    }
]

Currently I know of writing .map method everytime.

Sample: This is a snippet from the current implementation which is a real pain.

  {complete_data.map((data) => (
  <li>
    {data.fullname}
    <ul className="list-disc">
      {data.children.map((d) => (
        <li className="ml-10">
          {d.fullname}
          {d.children.length
            ? d.children.map((d2) => (
                <ul className="list-disc">
                  <li className="ml-10">
                    {d2.fullname}
                    <ul className="list-disc">
                      {d2.children.length
                        ? d2.children.map((d3) => (
                            <li className="ml-10">
                              {d3.fullname}
                              <ul className="list-disc">
                                {d3.children.length
                                  ? d3.children.map((d4) => (
                                      <li className="ml-10">
                                        {d4.fullname}
                                        <ul className="list-disc">
                                          {d4.children.length
                                            ? d4.children.map(
                                                (d5) => (
                                                  <li className="ml-10">
                                                    {d5.fullname}
                                                  </li>
                                                )
                                              )
                                            : null}
                                        </ul>
                                      </li>
                                    ))
                                  : null}
                              </ul>
                            </li>
                          ))
                        : null}
                    </ul>
                  </li>
                </ul>
              ))
            : null}
        </li>
      ))}
    </ul>
  </li>
))}

Any ideas or help to simplify the process would be immensely appreciated. Thanks.

欧阳斌 · Accepted Answer · 2022-02-11 11:24:15Z

4

const List = ({complete_data})=> {
   return (
      <ul className="list-disc">
        {complete_data.map(x=> <Item key={x.id} data={x} />)}
      </ul>
   )
}

const Item = ({data})=> {
   return (
     <li className="ml-10">
         {data.fullname}
         {data.children.length > 0 && (
            <ul className="list-disc">
               {data.children.map((x)=> <Item key={x.id} data={x} />)}
            </ul>
         )}
     </li>
   )
}

answered Feb 11, 2022 at 11:24

欧阳斌

2,3791 gold badge10 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Recursively map an array with unlimited number of nested arrays in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related