How to get random images from NASA API? - reactjs

Question

import React, { useEffect, useState } from 'react';
import Axios from 'axios';
const PictureOfTheDay = () => {
const [fetchedImage, setFetchedImage] = useState('');
const imageHandler = (name) => {
Axios.get(`https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?earth_data=2015-6-3&sol=1000&camera${name}&api_key="MY_API_KEY"/`).then((res) => {
setFetchedImage(res.data.photos[0].img_src);
// console.log(res.data.photos.img_src);
}, []);
};
useEffect(() => {
imageHandler();
});
return (
<section>
<h3>Astronomy Picture Of The Day</h3>
<div className="picture">
<button onClick={() => imageHandler('FHAZ')}>FHAZ</button>
<button onClick={() => imageHandler('RHAZ')}>RHAZ</button>
<button onClick={() => imageHandler('MAST')}>MAST</button>
<button onClick={() => imageHandler('CHEMCAM')}>CHEMCAM</button>
</div>
<img src={fetchedImage} alt="" />
</section>
);
};
export default PictureOfTheDay;
Currently, I am doing something like this but it is just showing me one image I know I have done something stupid but please help me out.

Answer 1

Used dummy API.
https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&api_key=DEMO_KEY
The JSON response sample.
{
"id": 102693,
"sol": 1000,
"camera": {
"id": 20,
"name": "FHAZ",
"rover_id": 5,
"full_name": "Front Hazard Avoidance Camera"
},
"img_src": "http://mars.jpl.nasa.gov/msl-raw-images/proj/msl/redops/ods/surface/sol/01000/opgs/edr/fcam/FLB_486265257EDR_F0481570FHAZ00323M_.JPG",
"earth_date": "2015-05-30",
"rover": {
"id": 5,
"name": "Curiosity",
"landing_date": "2012-08-06",
"launch_date": "2011-11-26",
"status": "active"
}
},
{
"id": 102694,
"sol": 1000,
...
"img_src": "http://mars.jpl.nasa.gov/msl-raw-images/proj/msl/redops/ods/surface/sol/01000/opgs/edr/fcam/FRB_486265257EDR_F0481570FHAZ00323M_.JPG",
}
},
...
Store the data in a useState variable and then map it and show only the image URL[img_src]. Hope it will solve your problem in this way.
const [myData, setMyData] = useState([]);
useEffect(() => {
fetch("API...")
.then(res=>res.json())
.then(data=>setMyData(data));
}, [])
{
myData.map(myData =><ImageCompo
key={myData.id}
myData={myData}
></ImageCompo>)
}
In ImageCompo retrieve imag_src props:
function ImageCompo({myData}) {
const{id,img_src}=myData;
<img src={img_src} alt='' width={200} height={200}></img>
Hope it would help you.