CODEWITHSUNDEEP
jsonreactjscarouselthumbnails
Tammy
Tammy

Reputation: 1132

React : how to display images from array into carousel with its thumbnail on using react-image-gallery

I am using JSON to display it on my image carousel with its thumbnail but i am facing problem on doing so.

JSON

{
"list": [
{
"RestaurantAttachmentId": "11449",
"RestaurantId": "2384",
"FileName": "classic-hall-ajivasan-banquets.jpg",
"AttachmentType": "3",
"Comments": ""
},
{
"RestaurantAttachmentId": "11449",
"RestaurantId": "2384",
"FileName": "classic-hall-ajivasan-banquets.jpg",
"AttachmentType": "3",
"Comments": ""
}
]
}

JSX

class GalleryMain extends Component {
    render() {
        const images = [
      {
        original: 'http://lorempixel.com/1000/600/nature/1/',
        thumbnail: 'http://lorempixel.com/250/150/nature/1/',
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/2/',
        thumbnail: 'http://lorempixel.com/250/150/nature/2/'
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/3/',
        thumbnail: 'http://lorempixel.com/250/150/nature/3/'
      }
    ]

    return (
      <ImageGallery items={images} />
    );
    }
}

How to display my images here by mapping.

Any help would be very helpful.

Thanks

Upvotes: 0

Views: 1357

Answers (2)

Rohith Murali
Rohith Murali

Reputation: 5669

Since there is no image for thumbnail, i have given the only image available for original and thumbnail. Also assumed that the json object name is 'json'

 class GalleryMain extends Component {
        render() {

        let images=this.props.json.list.map((restaurant)=>{ return {original:restaurant.FileName,thumbnail:restaurant.FileName}})
        return (
          <ImageGallery items={images} />
        );
        }
    }

Upvotes: 1

Prabhu
Prabhu

Reputation: 1057

You can try like this

class GalleryMain extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imageList: []
    };
  }

  componentDidMount() {

    for (var { FileName: url } of this.props.banquetImages.list) {
      var newObj = {}
      newObj.original = url;
      newObj.thumbnail = url;
      this.state.imageList.push(newObj)
    }
  }

  render() {

    return (
      <ImageGallery items={this.state.imageList} />
    );
  }
}

Upvotes: 1

Related Questions