title: Accessing key name in key-value pairs on props object in React
body: <p>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.</p>
  
  <p>For example, I have this object:</p>
  
  <pre><code>var fido = {
   animal: "dog",
   legs: 4,
   licksSelf: true
  }
  </code></pre>
  
  <p>I then pass this object via the props object to my React component:</p>
  
  <pre><code>&lt;Pet characteristics={fido} /&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>class Pet extends React.Component {
   render () {
    var petList = this.props.characteristics.map((char) =&gt; {
     return (
      &lt;div&gt;{char.key} : {char.value}&lt;/div&gt; // &lt;-- what should this code look like?
     );
    };
     return (
      &lt;div&gt;{petList}&lt;/div&gt;
     );
    };
  };
  </code></pre>
  
  <p>Does anyone know how I access the names of the keys in the key-value pairs on the props object? Thanks!</p>