CODEWITHSUNDEEP
javascriptreactjs
user6761897
user6761897

Reputation:

Rendering list items using map in React

I've the following array,

var IMAGES = [
    {
      src: 'http://placehold.it/325x250',
      mediaId: 'something'
    },
    {
      src: 'http://placehold.it/325x250',
      mediaId: 'something'
    },
    {
      src: 'http://placehold.it/325x250',
      mediaId: 'something'
    }
]

This is my React component where I wish to render the array.

function Viewer(props){
  return (
    <div className= 'row'>
      <div className= 'image-viewer'>
        <ul className='list-inline'>
        {props.images.map(function(image){
          <li><a href='#'><img src= {image.src} className='img-responsive img-rounded img-thumbnail' alt= {image.mediaId}/></a></li>
        })}

        </ul>
      </div>
    </div>
  );
}

This is how I'm declaring the props.

    Viewer.propTypes = {
      images: React.PropTypes.arrayOf(React.PropTypes.shape({
        src : React.PropTypes.string,
        mediaId: React.PropTypes.string
      }))
    };

This is how I'm passing the props inside the main container.

function App(props){
  return (
    <div className= 'container-fluid'>
      <Header />
      <div>

      </div>
      <Viewer images={IMAGES}/>
    </div>
  )
}

The list doesn't get rendered, and I don't get any array. Any help appreciated.

Upvotes: 2

Views: 3075

Answers (1)

TimoStaudinger
TimoStaudinger

Reputation: 42520

You are missing the return statement in your mapping function:

{props.images.map(function(image){
    return <li><a href='#'><img src= {image.src} className='img-responsive img-rounded img-thumbnail' alt= {image.mediaId}/></a></li>
})}

Upvotes: 3

Related Questions