React - componentDidMount API call does not fetch data?

Question

So I am trying to create this Gallery. I have first hardcoded the links to the images, but now want to fetch the images via API call. I have tried to implement this, but it's failing somehow, and it's still taking the hardcoded images from the flickrImages array. Any advice? (this is from a tutorial by the way)

import React, {Component} from 'react'

const flickrImages = [
  "https://farm2.staticflickr.com/1553/25266806624_fdd55cecbc.jpg",
  "https://farm2.staticflickr.com/1581/25283151224_50f8da511e.jpg",
  "https://farm2.staticflickr.com/1653/25265109363_f204ea7b54.jpg",
  "https://farm2.staticflickr.com/1571/25911417225_a74c8041b0.jpg",
  "https://farm2.staticflickr.com/1450/25888412766_44745cbca3.jpg"
];

export default class Gallery extends Component {
  constructor(props) {
    super(props);
    this.state = {
      images: flickrImages,
      selectedImage: flickrImages[0]
    }
  }
  componentDidMount() {
    const API_KEY = 'a46a979f39c49975dbdd23b378e6d3d5';
    const API_ENDPOINT = `https://api.flickr.com/services/rest/?method=flickr.interestingness.+getList&api_key=${API_KEY}&format=json&nojsoncallback=1&per_page=5`;

    fetch(API_ENDPOINT).then((response) => {
      return response.json().then((json) => {
        const images = json.photos.photo.map(({farm, server, id, secret}) => {
          return `https://farm${farm}.staticflickr.com/${server}/${id}_${secret}.jpg`
        });
        this.setState({images, selectedImage: images[0]});
      })
    })
  }

  handleThumbClick(selectedImage) {
    this.setState({
      selectedImage
    })
  }

  render() {
    const {images, selectedImage} = this.state;

    return (
      <div className="image-gallery">
        <div className="gallery-image">
          <div>
            <img src={selectedImage} />
          </div>
        </div>
        <div className="image-scroller">
          {images.map((image, index) => (
            <div key={index} onClick={this.handleThumbClick.bind(this,image)}>
              <img src={image}/>
            </div>
          ))}
        </div>
      </div>
    )
  }
}

is this react-native or react project?

Jickson
– Jickson

2016-11-02 09:25:39 +00:00
Commented Nov 2, 2016 at 9:25 — Jickson
– Jickson, Commented Nov 2, 2016 at 9:25

QoP · Accepted Answer · 2016-11-02 10:02:19Z

The API_ENDPOINT is not correct,

flickr.interestingness.+getList&api_key=${API_KEY}

should be

flickr.interestingness.getList&api_key=${API_KEY}

class Gallery extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [],
    }
  }
  componentDidMount() {
    const API_KEY = 'a46a979f39c49975dbdd23b378e6d3d5';
    const API_ENDPOINT = `https://api.flickr.com/services/rest/?method=flickr.interestingness.getList&api_key=${API_KEY}&format=json&nojsoncallback=1&per_page=5`;

    fetch(API_ENDPOINT).then((response) => {
      return response.json().then((json) => {
        console.log(json);
        const images = json.photos.photo.map(({farm, server, id, secret}) => {
          return `https://farm${farm}.staticflickr.com/${server}/${id}_${secret}.jpg`
        });
        this.setState({images, selectedImage: images[0]});
      })
    })
  }

  handleThumbClick(selectedImage) {
    this.setState({
      selectedImage
    })
  }

  render() {
    const {images, selectedImage} = this.state;

    return (
      <div className="image-gallery">
        <div className="gallery-image">
          <div>
            <img src={selectedImage} />
          </div>
        </div>
        <div className="image-scroller">
          {images.map((image, index) => (
            <div key={index} onClick={this.handleThumbClick.bind(this,image)}>
              <img src={image}/>
            </div>
          ))}
        </div>
      </div>
    )
  }
}

ReactDOM.render(
  <Gallery name="World" />,
  document.getElementById('container')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

Collectives™ on Stack Overflow

React - componentDidMount API call does not fetch data?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related