StochasticNerd StochasticNerd - 1 month ago 11
Javascript Question

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.

Answer

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>
})}
Comments