Render a Nested Element based on nested Array

Question

I got this nested arrays and I need to loop through it to create nested containers. lvl4 should go inside lvl3, lvl3 to lvl2 and lvl2 inside lvl1.

const elements = [ 
  { name: 'a-lvl1', innerEl: [ 
    { name: 'a1-lvl2', innerEl: [
      { name: 'a1-lvl3' , innerEl: [ 
        { name: 'a-lvl4', innerEl: [] }
      ] },
      { name: 'a2-lvl3' , innerEl: [ 
        { name: 'a-lvl4', innerEl: [] }
      ] }
    ] },
    { name: 'a2-lvl2', innerEl: [
      { name: 'a-lvl3' , innerEl: [ 
        { name: 'a-lvl4', innerEl: [] }
      ] }
    ] },
    { name: 'a3-lvl2', innerEl: [
      { name: 'a-lvl3' , innerEl: [ 
        { name: 'a-lvl4', innerEl: [] }
      ] }
    ] },
  ] },
  { name: 'b-lvl1', innerEl: [ { }] },
  { name: 'c-lvl1', innerEl: [ { }] }
]

This is the current script, which is working but I'm looking for a much simpler solution.

let renderElements = null;

if( elements !== undefined || elements.length != 0 ) {
  renderElements = elements.map( lvl1 => {   
    let lvl2Blocks = null;

    if( lvl1.innerEl !== undefined || lvl1.innerEl.length != 0) {
      lvl2Blocks = lvl1.innerEl.map( lvl2 => {
        let lvl3Blocks = null;

        if( lvl2.innerEl !== undefined || lvl2.innerEl.length != 0) {
          lvl3Blocks = lvl2.innerEl.map( lvl3 => {
            let lvl4Blocks = null;

            lvl4Blocks = lvl3.innerEl.map( lvl4 => {
              return (
                <div name={lvl4.name} selected={null} > 
                  { lvl4.innerEl !== undefined && lvl4Blocks }
                </div>
              )
            });

            return (
              <div name={lvl3.name} selected={null} > 
                { lvl3.innerEl !== undefined && lvl4Blocks }
              </div>
            )
          });
        }

        return (
          <div name={lvl2.name} selected={null} > 
            { lvl2.innerEl !== undefined && lvl3Blocks }
          </div>
        )
      });
    }

    return (
      <div name={lvl1.name} selected={null} > 
        { lvl1.innerEl !== undefined && lvl2Blocks }
      </div>
    )
  });
}

Any ideas? Thanks.

Jan Peter · Accepted Answer · 2018-12-14 04:50:49Z

2

As already shown here I created a working solution for you in a Codesandbox

Again, the trick is to use recursion here. So with this simple component you will be able to render as deep as you wish.

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

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

But keep in mind that you need to fix your datastructure. If your array is supposed to be empty, don't put an empty object in it like that:

{ name: 'b-lvl1', innerEl: [ { }] },

This should look like this, or you need to modify the ListItem component to check if the first item is an empty object

{ name: 'b-lvl1', innerEl: [] },

answered Dec 14, 2018 at 4:50

Jan Peter

9307 silver badges19 bronze badges

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

4 Comments

iismaell Over a year ago

Awesome. Thanks! I upvoted your solution in the previous thread. Those arrays are not empty by the way. Just didn't have the time to fill them in. :)

Jan Peter Over a year ago

@randomtu Thanks. Ah okey. Then ignore my statement about it ;)

iismaell Over a year ago

Do you know of any way to improve performance when doing recurssions? stackoverflow.com/questions/53843662/…

Jan Peter Over a year ago

To improve performance you need to return false in shouldComponentUpdate if you don‘t want to update it. A PureComponent does implement a shouldComponentUpdate function by itself, in which it does a shadow comparison between the properties and the state of the component.

Collectives™ on Stack Overflow

Render a Nested Element based on nested Array

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related