How to go through multidimensionnal array from API with Reactjs - reactjs

Question

After many attempts I fail to use arrays from https://swapi.co/api/
What I want is to use data from people and films.
I have 2 files :
App.js
import React, { Component } from "react";
import List from './List';
const API = 'https://swapi.co/api/';
class App extends Component {
constructor(props) {
super(props);
this.state = {
data: []
};
}
componentWillMount() {
this.fetchData();
}
fetchData = async () => {
const response = await fetch(API);
const json = await response.json();
this.setState({
data: json.data
});
};
render() {
return (
<List data={this.state} />
);
}
}
List.js
import React, { Component } from 'react';
import Person from './Person';
class List extends Component {
render() {
const { data } = this.props;
const { results } = data;
return (
<div className="flex-grow-1">
<div className="row mb-5">{results}</div>
</div>
);
}
}
export default List;
So, how do I go through that array to get what data I want to display ? I'd like to render people -> results and films -> results

Answer 1

results would be undefined since results is not a node within your data object... try removing the line const {results} = data and in the return map the data array:
return (
<div className="flex-grow-1">
{
data.map((results, i) => {
return (<div key={i} className="row mb-5">{results}</div>);
})
}
</div>
);
you will need the key to avoid React's unique key warning

Answer 2

So this code as it is now will fetch the single object that acts as a map of other urls for entities in this API. what you want to do is modify fetchData so it accepts a url. At that moment you can do an initial request to /api, read the url from the result for people and films and call fetchData again with these urls. The received data can be saved inside the state.
A example for the implementation of componentWillMount() and fetchData():
componentWillMount() {
this.fetchData('https://swapi.co/api/')
.then(res => {
this.fetchData(res.people).then(people => alert(JSON.stringify(people)));
this.fetchData(res.films).then(people => alert(JSON.stringify(people)));
});
}
async fetchData(url) {
const response = await fetch(url);
return response.json();
};
The most important change is that fetchData now returns a promise. That allows us to use the then method to use the result of the first request. You can replace the alert with a setState implementation for yourself.