How to use map on an array of objects

Question

Using this data set to listData state in React:

[
   {
      "Key": "Anchorage TAC 82.tif",
      "LastModified": "2019-04-07T03:25:51.000Z",
      "ETag": "\"9f904f2219d1edf3fa39b171c98de924-6\"",
      "Size": 28135199,
      "StorageClass": "STANDARD"
   },
   {
      "Key": "CSA-L01.pdf",
      "LastModified": "2019-04-07T03:25:36.000Z",
      "ETag": "\"90f166238ae6b1f64120e984be743ba4\"",
      "Size": 3406742,
      "StorageClass": "STANDARD"
   }
]

How can I map the Key values into a drop downlist. I've tried:

<select>
    <option>Please select a file:</option>
        {Object.keys(this.state.listData).map(val =>
        <option value={val.Key}>{val.Key}</option>) }
</select>

and it's not working. I'm getting a blank drop down list.

Maheer Ali · Accepted Answer · 2019-04-11 02:50:57Z

2

listData is an array and Object.keys(this.state.listData) will return array of indexes [0,1,2..]
.You need to remove Object.keys() and apply map() directly on listData

<select>
    <option>Please select a file:</option>
        {
           this.state.listData.map(val =>(
              <option value={val.Key}>{val.Key}</option>
           ) 
        }
</select>

answered Apr 11, 2019 at 2:50

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rupp Over a year ago

When I try this I get "this.state.listData.map is not a function"

Maheer Ali Over a year ago

@Rupp How your state looks like. listData is an array right?

Collectives™ on Stack Overflow

How to use map on an array of objects

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related