I am trying to make a web app and I am fetching data from some where as an array. I got urls from this array in each element. So I could not imagine how I should fetch data from the mapped urls.
useEffect(() => {
axios
.get(`someurl`)
.then((response) => setState(response.data));
}, []);
I am fetching basically as above and putting the response in some state.
[{
"userId": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false,
"url": "fakeapi.com/user/1"
},
{
"userId": 2,
"id": 2,
"title": "delectus aut autem",
"completed": false,
"url": "fakeapi.com/user/2"
}]
Then I am mapping the response and listing in table. I want to fetch again via urls in response. I could not understand how should I do because I am putting each response in a state.How should I do it? Thanks in advance!
This code get the user list first and then get the individual user info using the response.data url by the loop. Then finally it set to the setstate
axios
.get(`someurl`)
.then(async (response) => {
await response.data.map(async (data, index) => {
await axios
.get(data.url)
.then((resp) => response.data[index].user_data = resp.data );
})
console.log(response.data)
setState( prevData => [...prevData, response.data] );
})