React How to fetch data from mutiple urls - reactjs

Question

From Starships I get only array of urls I would like to fetch these url adresses and get name of each starship. I tried to do it throuht map array but I probably don´t know to write it. Do you have any ideas?
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props){
super(props);
this.state = {
movies:[],
starships:[],
}
}
//we fetch all data and store it to movies
async componentDidMount() {
return await fetch("https://swapi.dev/api/films/")
.then(result => result.json())
.then(data =>
this.setState({
movies: data.results
})
)
}
render(){
console.log(this.state.movies);
return (
<div className="App">
<h1>Movies</h1>
<div className="moviesList">
{this.state.movies.map((movie, index) => {
return <p key={index} >{movie.title}</p>
})}
</div>
<div className="starshipsList">
{this.state.movies.map((starship, index) => {
return <p key={index} >{starship.starships}</p>
})}
</div>
</div>
);
}
}
export default App;

Answer 1

You should check if the API doesn't provide another endpoint for starships as what are you trying to do isn't a best approach in my opinion.
But if it doesn't and you still need starship list, something like this could work:
async componentDidMount() {
// get movies
const moviesResult = await fetch("https://swapi.dev/api/films/");
const movies = await moviesResult.json();
// get array of all urls
const starshipsUrls = movies.results.reduce((acc, movie) => {
return acc.concat(movie.starships);
},[]);
// map over the urls and use promise.all to fetch
const starshipsResult = await Promise.all(starshipsUrls.map(url=> fetch(url)));
const starships = starshipsResult.json();
this.setState({
movies,
starships
});
}