title: Object's property not available (undefined) inside Array.map
body: <p>I have a "photos" array of "photo" object.
  Each "photo" object has a property value for the image url.</p>
  
  <p>I try to iterate over the "photos" array with map(), in this way</p>
  
  <pre><code>photos.map((photo, index) =&gt; {
      console.log(photo)
      console.log(photo.value)
      return (
          &lt;img
              key={index}
              src={photo.value}
              className={index === active ? 'active' : ''}
              alt="thumbnail"
          /&gt;
      )
  })
  </code></pre>
  
  <p>For some reason that I'm completely missing, photo.value is not available.</p>
  
  <p><br/></p>
  
  <p>This is what those two console.log print out:</p>
  
  <p><a href="https://i.stack.imgur.com/FE7E7.png" rel="nofollow noreferrer">console.log output</a>
  <br/></p>
  
  <p>It seems the object is available, but then the "value" property returns undefined.<br/> This was supposed to be very simple but I'm completely stuck at this point.</p>
  
  <p><br/><br/></p>
  
  <p>How can this be possible? What am I missing here?</p>
  
  <p>Thanks</p>