title: Rendering list items using map in React
body: <p>I've the following array,</p>
  
  <pre><code>var IMAGES = [
      {
        src: 'http://placehold.it/325x250',
        mediaId: 'something'
      },
      {
        src: 'http://placehold.it/325x250',
        mediaId: 'something'
      },
      {
        src: 'http://placehold.it/325x250',
        mediaId: 'something'
      }
  ]
  </code></pre>
  
  <p>This is my React component where I wish to render the array.</p>
  
  <pre><code>function Viewer(props){
    return (
      &lt;div className= 'row'&gt;
        &lt;div className= 'image-viewer'&gt;
          &lt;ul className='list-inline'&gt;
          {props.images.map(function(image){
            &lt;li&gt;&lt;a href='#'&gt;&lt;img src= {image.src} className='img-responsive img-rounded img-thumbnail' alt= {image.mediaId}/&gt;&lt;/a&gt;&lt;/li&gt;
          })}
  
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>This is how I'm declaring the props.</p>
  
  <pre><code>    Viewer.propTypes = {
        images: React.PropTypes.arrayOf(React.PropTypes.shape({
          src : React.PropTypes.string,
          mediaId: React.PropTypes.string
        }))
      };
  </code></pre>
  
  <p>This is how I'm passing the props inside the main container.</p>
  
  <pre><code>function App(props){
    return (
      &lt;div className= 'container-fluid'&gt;
        &lt;Header /&gt;
        &lt;div&gt;
  
        &lt;/div&gt;
        &lt;Viewer images={IMAGES}/&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>The list doesn't get rendered, and I don't get any array.
  Any help appreciated.</p>