ReactJS: Render an object with keys with map

Question

I am new to reactjs/es6 and I'm trying to render an object that looks like this in console.log() :

Object
0: {_id: "5ceea2eb0023ee3bcc730cc7", createdAt: "2015-01-25T05:00:00.000Z", modifiedA: "2019-05-28T04:00:00.000Z", sku: "SUP", name: "Superior", …}
1: {_id: "5ceebf7ea686a03bccfa67bf", createdAt: "2015-01-25T05:00:00.000Z", modifiedA: "2019-05-28T04:00:00.000Z", sku: "ULT", name: "Ultimate", …}
2: {_id: "5ceec48fa686a03bccfa67c4", createdAt: "2015-01-25T05:00:00.000Z", modifiedA: "2019-05-28T04:00:00.000Z", sku: "PRO", name: "Professional", …}

I have tried to do this with map() as well as with other methods but I am unable to get it to work. Here's what I've tried:

return(
         Object.keys(prods).map((key, i) => (prods[key].map((product, ind) =>
              <div key={ind}>
               <h3>{product.name}</h3>
             </div>
            )
        ))
    )

I would appreciate any suggestion on how to access that data, that way I can render it into a div or something.

EDIT:

This is how I made it work and modified into after I was put in the right direction. Thank you everyone!

let prodlist = Object.values(prods).map((product, ind) => (
  <Container>
    <h3>{product.name}</h3>
  </Container>
 ));

return(    
   {prodlist}
)

Thank you

Answer 1

You could update your components render() logic to use Object.values() , to extract the values of the input prods object. You'd then map() each array item to a JSX template like this:

return <React.Fragment> 
{ 
    Object.values(prods).map((product) => (<div key={product._id}>
        <h3>{product.name}</h3>
    </div>))
}
</React.Fragment>

An extra note relating to the key prop - it's best to supply a key values that identifies the item in the list being rendered (rather than the current index of the item in the list). Assuming that the _id field of each item in prods is unique, that data would be better suited for the key prop than ind .

Answer 2

The problem is you don't need to use map to prods[key] because it isn't array

return(
         Object.keys(prods).map((key, i) => (
              <div key={prods[key]._id}>
               <h3>{prods[key].name}</h3>
             </div>
        ))
    )

Answer 3

First thing you need to do is map the object array , then read the keys and values inside that object.

This is the way to get keys and values in object array.

   render() {
        const obj = [{_id: "5ceea2eb0023ee3bcc730cc7", createdAt: "2015-01-25T05:00:00.000Z", modifiedA: "2019-05-28T04:00:00.000Z", sku: "SUP", name: "Superior"},
          {_id: "5ceebf7ea686a03bccfa67bf", createdAt: "2015-01-25T05:00:00.000Z", modifiedA: "2019-05-28T04:00:00.000Z", sku: "ULT", name: "Ultimate"},
          {_id: "5ceec48fa686a03bccfa67c4", createdAt: "2015-01-25T05:00:00.000Z", modifiedA: "2019-05-28T04:00:00.000Z", sku: "PRO", name: "Professional"}
        ]

        return(
          <>
            {obj.map((item, i) => (
              Object.keys(item).map(key=>{
                return <div>
                  <h3>key: {key}, value: {item[key]}</h3>
                </div>
              })             
            ))}
          </>
        )
      }