Image grid using React and JSON? - list

Question

EDIT: I added this FIDDLE.
I'm a noobie to JSX and I'm trying to (correctly) build an image grid in React using a JSON file of images.
What is the best or "correct" approach for doing this?
My JSON file (updated per Nick's suggestion):
{
"images": [
{
"url": "./images/temp/playlist_tn_01.jpg",
"className": "playlist-tn"
},
{
"url": "./images/temp/playlist_tn_02.jpg",
"className": "playlist-tn"
},
{
"url": "./images/temp/playlist_tn_03.jpg",
"className": "playlist-tn"
}
]
}
My List module (copied from an example online):
var List = React.createClass({
render: function() {
return (
<ul>
{this.props.list.map(function(listValue){
return <li>{listValue}</li>;
})}
</ul>
)
}
});
module.exports = List;
My Updated list container component:
var Playlist = React.createClass({
render() {
let playlistImages = $.getJSON('images/temp/playlist_tn.json', images);
return (
<ReactCSSTransitionGroup transitionName="pagefade" transitionAppear={true} transitionAppearTimeout={500}>
<List list={playlistImages.images} />
</ReactCSSTransitionGroup>
)
}
})
module.exports = Playlist;
UPDATE FIDDLE

Answer 1

If you are rendering the component like this, e.g. passing the image node to the list property:
var mainComponent = React.createClass({
render() {
let jsonFileData = //ajax call to get file here
return (
<List list={jsonFileData.images} />
)
}
})
Then your jsx should read like this, you need to map the properties of the json onto an img element, and you need to use className instead of class as the property name :
var List = React.createClass({
render: function() {
return (
<ul>
{this.props.list.map(function(listValue){
return <li><img url={listValue.url} className={listValue.class} /></li>;
})}
</ul>
)
}
});
module.exports = List;
I would also recommend using arrow functions where possible in your maps, it makes things easier to read:
<ul>
{this.props.list.map( image =>
<li>
<img url={image.url} className={image.class} />
</li>
)}
</ul>
If you change your json class property to be called className and url to be src, you could use the spread operator to set all the props in one go too:
<img {...image} />
Working fiddle