I have an array of objects:

const arr = [ { a: value1, b: value2, .......... }, { a: value1, b: value2, c: value3, ......... }, {........, ........, ........, ........, } ]

The number of properties in each object changes, I need to render the values ​​of these properties in 3 columns, this is how I do it now:

 render(){ const columns = arr.map((item) => { return( <div className={column}> {item.a ? <span>{item.a}</span> : ''} {item.b ? <span>{item.b}</span> : ''} ..................... ..................... </div> ) }) } return( {columns} )

How do I, through the function, render those spans, in which there are values, more optimally and more correctly?

    1 answer 1

    You can use the map method also with an object, only you need to call it not for the object itself, but for its keys, which can be obtained by the Object.keys method.

    In addition, it is not necessary to save the result of arr.map in a variable, you can immediately put it in return .

     render(){ return ( {arr.map((item) => <div className={column}> {Object.keys(item).map((key) => <span>{item[key]}</span> )} </div> )} ) }