map axios response then use it for another response - reactjs

Question

I want to map an array of images, but because Directus is identifying an image or a file as an id in the collection's item.
right now I need to map the array of id from the response in the first request then using that id for making another get request in another endpoint which is right here is files.
the database that I use is DirectusCms, and the front end is react.js
class ComponentToPrint extends React.Component {
constructor(props) {
super(props);
this.handleLoad = this.handleLoad.bind(this);
this.state = {
nama: [],
kk:[],
ijazah:[]
};
}
componentDidMount() {
window.addEventListener('load', this.handleLoad);
}
componentWillUnmount() {
window.removeEventListener('load', this.handleLoad)
}
handleLoad() {
let nama_1;
let id_kk;
const url = `https://sensor/public/gemaclc/items/pendaftar?access_token=sensor`
const url2 = `https://sensor/public/gemaclc/files/${id_kk}?access_token=sensor`
axios(url, {
method: 'get',
headers:{ 'Content-Type': 'application/json'} })
.then(res => {
const nama = res.data.data;
const nama = res.data.data;
console.log( nama)
this.setState( {nama} );
})
.catch(error => console.error('Error:', error))
// .then(res => {console.log('Success:', nama)})
// this.setState( nama );
// console.log(nama)
axios(url2,{
method:`get`,
headers:{ 'Content-Type': 'application/json'} })
.then(res => {
id_kk = res.data.data;
console.log( id_kk)
// this.setState( {id_kk} );
})
}
render() {
return (
<>
{this.state.nama.map(node =>
<div key={node.id}>
<h2>Nama :{node.nama}</h2>
<h2>Tanggal lahir : {node.tanggal_lahir}</h2>
<h2>Tempat lahir : {node.tempat_lahir}</h2>
<h2>Email : {node.email}</h2>
<h2>Email : {node.telepon}</h2>
<h2>kk : {node.kartu_keluarga}</h2>
</div>
)}
</>
);
}
}

Answer 1

When requesting from the items endpoint in Directus one can supply a query parameter called fields, with this you can get nested information from relations, including the hash etc, see: https://docs.directus.io/api/items.html#fields-optional
If you have the private hash, you can use the assets endpoint to get the actual image, see: https://docs.directus.io/api/assets.html#get-an-asset
PS: You haven't mentioned what your problem is, so I guessed it based on my overall knowledge of the topic - next time also mention your exact problem, what you've tried and what didn't work etc