Flickr public api using jsonp in react

Question

I'm trying to display images with the Flickr public api using a jsonp request in react. I keep getting different issues and don't know how to make this work. I'm also using Codepen and I have errors like "Uncaught ReferenceError: jsonFlickrFeed is not defined". I have seen working examples but I'm new to jsonp so don't really know how to integrate this with react

Full code is here

getItems() {
   $.ajax({
      url: 'https://api.flickr.com/services/feeds/photos_public.gne',
      dataType: 'jsonp',
      data: {
         "tags": this.state.search,
         "format": "json"
      }
   })
}

Answer 1

Fixed codepen link.

Steps to fix this problem:

• As suggested here, add nojsoncallback=1 parameter to the API URL to receive a pure json object.
• Remove dataType:jsonp property from ajax settings not to get MIME type error, because we no more receive a JSONP response.

• Put your callback function in .done() method

• If you preview the code on codepen, you will get a CORS error. Run your code on your local environment or install a CORS Browser plugin to get rid of this error.