score:1

Accepted answer

Loop through the array like, and call it by their index like the example below

let layout= [
            [
                {
                    type: 'text',
                    value: 'abc'
                }
            ],
            [
                {
                    type: 'text',
                    value: 'def'
                }
            ],
            [
                {
                    type: 'text',
                    value: '123'
                },
                {}
            ]
        ];

         let rows = [];
         var div = document.createElement('div');
         for (let i = 0; i < layout.length; i++) {
             rows.push('<div className="row" key={i}></div>');
             var s = '<li>'+layout[i][0].type+': '+layout[i][0].value+'</li>'; 
             document.body.innerHTML +=s;
         }

score:0

In your for loop, you get a number to work with. In this case, i. You can access the contents of i with layout[i]. Push that to your rows object inside the div, that should work.

score:0

JS Fiddle Demo React Solution

<div>{(layout).map(function(data){ return( data.map(function(data){ return( <div> {data.type+ "\n"
+data.value } </div> ) }) ) })}</div>

score:0

I suggest that you use Array.map:

layout.map(row => {
  return (
    <div>
      <input type={row.type} value={row.value} />
    </div>
  )
})

For a complete example with React, see : https://jsfiddle.net/gbourgin/wu737LLj/

Remark: I don't see why you need an array of array for your layout variable


Related Query

More Query from same tag