I'm trying to add objects to the 2 property of the FecthApis component. I make the call to the two Api's, and receive the requisition with the expected objects. However, when I try to include these objects in both properties with "setState", I get the following error for the second property (feedGitHub): uncaught (in promise) TypeError: Can not read property 'setState' of null
The code is as follows:
import React, { Component } from 'react';
import axios from 'axios';
class App extends React.Component {
render() {
return (
<div className="App">
<FetchApis />
</div>
)
}
}
class FetchApis extends React.Component {
constructor(){
super();
this.state ={
feedReddit: [],
feedGitHub: []
}
}
componentDidMount(){
axios.all([
axios.get('https://www.reddit.com/r/redditdev/top.json?limit=2'),
axios.get('https://api.github.com/search/repositories?q=react+language:javascript&sort=stars&order=desc')
])
.then(axios.spread(function (reddit, github) {
var feed1 = reddit.data.data.children.map(obj => obj.data);
var feed2 = github.data.items.map(obj => obj)
console.log(feed1);
console.log(feed2);
this.setState({
feedReddit: {feed1},
feedGitHub: {feed2}
})
}));
}
render(){
return(
<div>
<h1>teste</h1>
<ul>
{this.state.feedReddit.map(bananareddit =>
<li key={bananareddit.id}>{bananareddit.title}</li>
)}
</ul>
<ul>
{this.state.feedGitHub.map(bananagithub =>
<li key={bananagithub.id}>{bananagithub.name}</li>
)}
</ul>
</div>
)
}
}
export default App;
Thank you very much for your attention.