Accessing key name in key-value pairs on props object in React

Question

I'm working on a React app and want the component I'm working on to be able to access the key names in the props object the component is receiving.

For example, I have this object:

var fido = {
 animal: "dog",
 legs: 4,
 licksSelf: true
}

I then pass this object via the props object to my React component:

<Pet characteristics={fido} />

Then in my React component for Pet, I want to access both the key and the value, how might I do that? For example, in this following incorrect code:

class Pet extends React.Component {
 render () {
  var petList = this.props.characteristics.map((char) => {
   return (
    <div>{char.key} : {char.value}</div> // <-- what should this code look like?
   );
  };
   return (
    <div>{petList}</div>
   );
  };
};

Does anyone know how I access the names of the keys in the key-value pairs on the props object? Thanks!

well...first of all you cant map over an object. You can only map over an array — erichardson30, Jul 19 '16 at 17:53
You're absolutely right -- I was trying to come up with a quick example and wasn't thinking. Thanks for pointing that out. — Adam White, Jul 19 '16 at 21:02

score 56 · Accepted Answer · answered Jul 19 '16 at 17:53

56

Use Object.entries method:

const petList = Object.entries(fido).map(([key,value])=>{
  return (
      <div>{key} : {value.toString()}</div>
  );
})

value.toString() for boolean types to render correctly

answered Jul 19 '16 at 17:53

Igorsvee

4,101
1
25
21

Accessing key name in key-value pairs on props object in React

1 Answers1