.map () on an array of multilevel objects

Question

.map () on an array of multilevel objects

Navigation

#1 by (0 votes)

0

I have an object with the following structure:

{1:[{1:1, 2:2 ...}, {1:1, 2:2 ...},...]   2:[{1:1, 2:2 ...}, {1:1, 2:2 ...}, ..]}

I want to reference the first or second property in a react component stateless with a prop and make map to render the component How can I reference the first or second property?

<div id='drum-pads'>{Object.keys(o).map(d => (
          <Pad
            key={d.name}
            id={d.name}
            letter={d.shortcut}
            src={d.link}
            handleDisplay={props.handleDisplay}
          />   
         ))}
        </div>

object react map

asked by michel perez 03.12.2018 в 18:45

source

1 answer

Error creating a Schema with a field of type file in NodeJs Reply Objetc Array in Web Service XML-RPC

score 0 · Answer 1

instead of using Object.keys (or) (if you can use the ECMAScript ES2017 standard) you can use Object.values (or) to access the properties of your object.

Object.values(o).map(d => (
      <Pad
        key={d[n].name}
        id={d[n].name}
        letter={d[n].shortcut}
        src={d[n].link}
        handleDisplay={props.handleDisplay}
      />   
     ));

You can use it too.

Object.keys(o).map(d => (
      <Pad
        key={o[d][n].name}
        id={o[d][n].name}
        letter={o[d][n].shortcut}
        src={o[d][n].link}
        handleDisplay={props.handleDisplay}
      />   
     ));

Being n the very property of the array that you want to access (the first or the second in your question).