Map function on object and get keys and values Javascript

Question

I have an object like this:

{"Job": "Electrician", "Starbucks": "Vanilla Frapaccino"}

I need to map over it to get the key and the value in a React component like this.

            return<DetailCell>
                <Label>{key}</Label>
                <Text style={TextStyle}>{value}</Text>
            </DetailCell>

map function says details says its undefined. If I do Object.keys(details) then I get the keys. How do I get both in React Native? Please help thanks.

Answer 1

Object.entries() returns the array of key value pairs ( [[key1,value1],[key2,value2]..] which you can .map() this way (using destructuring syntax ):

const src = {"Job": "Electrician", "Starbucks": "Vanilla Frapaccino"}
...
Object.entries(src).map(([key,value]) => (
   <DetailCell>
      <Label>{key}</Label>
      <Text style={TextStyle}>{value}</Text>
   </DetailCell>
))