Rendering in React from JSON - json

Question

I have a little bug in my app and can't fix it.
I need to render images from JSON.
First of all, I have a number of albums:
AlbumLayout
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link, browserHistory } from 'react-router';
class AlbumLayout extends Component {
handleClick(album){
browserHistory.push({
pathname: "album/" + album.id,
state: {albumDetails: album}
});
}
renderList(){
return this.props.albums.map((album) => {
return(
<li onClick={this.handleClick.bind(this, album)} key={album.id}>
<img alt="job" src={album.img} />
<p className="album_titulo">{album.title}</p>
</li>
);
});
}
render(){
return (
<div>
<div className="albums">
<div className="albums_caixa">
<div className="row">
<div className="col-xs-12">
<ul className="no_pad">
{this.renderList()}
</ul>
</div>
</div>
</div>
</div>
</div>
);
}
}
function mapStateToProps(state){
return {
albums: state.album
};
}
export default connect(mapStateToProps)(AlbumLayout);
Every albums has own list of images:
List of images
import React, { Component } from 'react';
import { connect } from 'react-redux';
class AlbumsShow extends Component {
renderImage(mainData, imageIdx){
let jobDetails = this.props.albums.filter( t => t.id == this.props.params.id)[0];
return (
<div key={imageIdx} className='content'>
{mainData.images.map((image, etag) => {
return(
<div key={image.etag} className='content_box'>
<img key={image.etag} src={image.images.smallThumbnail} alt="book"/>
</div>
)
})}
</div>
)
}
render(){
return (
<div>
{this.props.image.map(this.renderImage)}
</div>
);
}
}
function mapStateToProps({image}) {
return {image};
}
export default connect(mapStateToProps)(AlbumsShow);
When user click on any Album, he should see list of images, which is parsing from JSON.
{
"images": {
"id": "01",
"etag": "01",
"images": {
"kind": "image",
"id": "1",
"etag": "1",
"smallThumbnail": "http://books.google.com/books/content?id=FaaQgVCaXU4C&printsec=frontcover&img=1&zoom=5&edge=curl&source=gbs_api"
}
}
}
As for me, I have mistake in List of images-file, but I can't find it.
I will really appreciate for any help.
Thanks!

Answer 1

I think you may just need to bind the this context in your .map function:
return (
<div>
{this.props.image.map(this.renderImage.bind(this))}
</div>
);
It also looks like you might need to add albums to your connect in that component.