CODEWITHSUNDEEP
javascriptreactjsecmascript-6
comsci_dude
comsci_dude

Reputation: 204

ReactJS: Render an object with keys with map

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

Upvotes: 1

Views: 193

Answers (3)

Tenusha Guruge
Tenusha Guruge

Reputation: 2290

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>
              })             
            ))}
          </>
        )
      }

Upvotes: -1

Dacre Denny
Dacre Denny

Reputation: 30360

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.

Upvotes: 4

yovie
yovie

Reputation: 79

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>
        ))
    )

Upvotes: 2

Related Questions