Create nested JSX list items from multi-level nested array of objects reactjs

Question

I am trying to create a nested JSX list items from nested object array. Below is the array:

[
  {
    "id": 1,
    "name": "USA",
    "values": [
      {
        "id": 2,
        "name": "Chevy",
        "values": [
          {
            "id": 3,
            "name": "Suburban"
          },
          {
            "id": 4,
            "name": "Camaro",
            "values": [...]
          }
        ]
      },
      {
       "id": 5,
       "name": "Ford",
       "values": [...]
      }
    ]
  }
]

Below is what the array should be converted to:

<ul>
  <li>USA
    <ul>
      <li>Chevy
        <ul>
          <li>Suburban</li>
          <li>Camaro</li>
        </ul>
      </li>
      <li>Ford</li>
    </ul>
  </li>
</ul>

Here is my approach:

const resultArray = [];
data.forEach((item) => {
  resultArray.push(
    <li>{item.name}
  )
  if(item.values){
   //recursively iterate and push into array
  }
  resultArray.push(</li>); //React does not allow this
});
return resultArray;

React does not allow adding individual markups into array. Please help provide a solution.
P.S.: I apologize in advance if you find something wrong with formatting. This is the first time I am posting on stackOverflow.

Two suggestions: 1) create Different parent & components for the differing data-structures. 2) If the nested goes deeper you may want to create something higher order and use recursion. — Jefftopia
– Jefftopia, Commented Dec 14, 2018 at 3:28

Jan Peter · Accepted Answer · 2018-12-14 04:53:36Z

13

You can "render" your children into a variable and use this directly in your component. The trick then is to use a recursive component. That way it doesn‘t matter how deep your tree is. You don‘t need to edit this component if your tree gets deeper.

Here is how that might look like:

function ListItem({ item }) {
  let children = null;
  if (item.values) {
    children = (
      <ul>
        {item.values.map(i => <ListItem item={i} key={i.id} />)}
      </ul>
    );
  }

  return (
    <li>
      {item.name}
      {children}
    </li>
  );
}

Here is a working example on Codesandbox with your data.

edited Dec 14, 2018 at 4:53

answered Dec 14, 2018 at 3:35

Jan Peter

9307 silver badges19 bronze badges

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

Comments

Dinesh Pandiyan · Accepted Answer · 2018-12-14 03:38:13Z

You should push the entire node to the array at once. Have a render method like this.

const getNode = (data) => {
  return (
    <ul>
      {data.map((item) => (
        <li>
          USA
          <ul>
            {item.values && item.values.length
              ? item.values.map((subItem) => (
                  <li>
                    {subItem.name}
                    <ul>
                      {subItem.values && subItem.values.length
                        ? subItem.values.map((subSubItem) => <li>{subSubItem.name}</li>)
                        : null}
                    </ul>
                  </li>
                ))
              : null}
          </ul>
        </li>
      ))}
    </ul>
  );
};

And call that method in your render function with the data

const RenderList = (data) => {
  return (
    <div>
      { getNode(data) }
    </div>
  );
};

export default Layout;

Jefftopia · Accepted Answer · 2018-12-14 03:53:58Z

Here's a full solution example using stencil, which is a framework syntactically similar to React. You can simplify it more by using Array.prototype.reduce.

import { Component, State } from '@stencil/core';

@Component({
    tag: 'app-nested-list-demo'
})
export class NestedList {

    @State() foo = [
        {
            name: 'US',
            makers: [
                {
                    name: 'Ford',
                    models: [
                        {
                            name: 'Suburban',
                            mpg: '9000'
                        },
                        {
                            name: 'Escape',
                            mpg: '300'
                        }
                    ]
                },
                {
                    name: 'GMC',
                    models: [
                        {
                            name: 'Acadia',
                            mpg: '11'
                        },
                        {
                            name: 'Envoy',
                            mpg: 'Yukon'
                        }
                    ]
                }
            ]
        },
        {
            name: 'Japan',
            makers: [
                {
                    name: 'Honda',
                    models: [
                        {
                            name: 'CRV',
                            mpg: '100'
                        },
                        {
                            name: 'Accord',
                            mpg: '9000'
                        }
                    ]
                },
                {
                    name: 'Toyota',
                    models: [
                        {
                            name: 'Rav4',
                            mpg: '10'
                        },
                        {
                            name: 'Camry',
                            mpg: '400'
                        }
                    ]
                }
            ]
        }
    ];

    render() {
        const outerList = this.foo.map(country => {

            const middleList = country.makers.map(make => {

                const innerList = make.models.map(model => {
                    return (
                        <li>{model.name} has {model.mpg} MPG</li>
                    );
                });

                return (
                    <li>
                        {make.name}
                        <ul>
                            {innerList}
                        </ul>
                    </li>
                );

            });

            return (
                <li>
                    {country.name}
                    <ul>
                        {middleList}
                    </ul>
                </li>
            );
        });

        return (
            <ul>
                {outerList}
            </ul>
        );

    }
}

iismaell · Accepted Answer · 2018-12-14 04:05:14Z

0

I kind of asked the same thing but I already have a script for it, so I'm just looking for a much simpler solution. The script here might help.

// Render a Nested Element based on nested Array

answered Dec 14, 2018 at 4:05

iismaell

6335 silver badges11 bronze badges

5 Comments

Jan Peter Over a year ago

Have a look at my solution, I don‘t think it gets any simpler than that.

iismaell Over a year ago

I don't think that implementation can handle 4 levels or more of nested elements and it will probably still end up with nested array map but thanks for the idea.

Jan Peter Over a year ago

Did you try it? Because it doesn‘t matter how big the tree is because I use recursion here. So my solution will render as deep as you define it in your datastructure, without any further tweeking the component.

Jan Peter Over a year ago

I posted an answer to your question and provided a working example with Codesandbox. As far as I understood you correctly, this is exactly what you want to accomplish.

iismaell Over a year ago

Working solution by @Jan Peter here: stackoverflow.com/questions/53722558/…

Collectives™ on Stack Overflow

Create nested JSX list items from multi-level nested array of objects reactjs

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related