Random Astronomy Photo

Hi everyone! I made a React app that uses the NASA Astronomy Picture of the Day (APOD) API to generate a random space photo and some cool facts about it.

Live version: Random Astronomy Photo
GitHub repository

One issue I’m having is that a small percentage of NASA’s APOD entries are not images but videos. The object returned from the API has a property “media_type” that identifies whether the entry is an image or video, but I can’t figure out how to check for the media_type and change the app’s behavior accordingly. Currently, if a video is fetched, the title and description will update, but of course the element doesn’t render anything because the url is a video link.

A couple possible solutions for this:

  • Check for media_type and if it’s a video, embed the video.
  • Check for media_type and if it’s a video, don’t render the data and fetch another entry.

However, I’m not sure how to implement either of these. I tried if statements and they don’t seem to work.

Any suggestions for how to solve this issue would be much appreciated. Also, if you find any bugs or have any other suggestions to improve the design or code, please let me know!

Thank you so much for checking out my project!

Update: I figured it out! I needed to use a Promise with then/catch to retry fetching the data if it doesn’t return an image. I have pushed the update to GitHub if anyone wants to see what it looks like now.

I am still looking for general feedback. Thank you!