edit: I figured out that calling console.log immediately does not show the desired results because setstate is asynchronous, but I dont understand why the props im using do not render properly. Three divs are rendered, one for each object in the array, yet the text does not follow.
Ive recently been working on a react project where i fetch several github repos through the github api, and i've run into a problem when the data is fetched and the response is turned to a javascript object with .json(). When I log the return of response.json() it returns the information I want, but when I log my state array it returns empty.
componentDidMount() {
var urls = [
'https://api.github.com/repos/random/proj',
'https://api.github.com/repos/random/proj2',
'https://api.github.com/repos/random/proj3'
];
const requests = urls.map((url) => fetch(url))
Promise.all(requests)
.then((resps) => resps.map((response) => response.json()))
.then((jsons) => console.log(jsons)) //this logs 3 objects in array (only present for example)
.then((jsons) => {
const fetchedProjs = jsons;
this.setState({
projects: fetchedProjs,
DataFetched: true
})
})
.then(console.log(this.state.projects)) //this logs 0 objects in array
}
my render() does display the styled outline of three divs, yet the array logged in console shows length of 0.
if (!this.state.DataFetched)
{
return (
<h2>Loading...</h2>
)
}
return(
<>
{this.state.projects.map((project, i) => (
<div className="row project" key={`${i}`}>
<div className="card">
<h2>{project.name}</h2>
<p>{project.description}</p>
</div>
</div>
I'm very new to react and but i've tried to resolve it as best I can, but there's obviously something I'm missing!
edit2 updated code:
const requests = urls.map((url) => fetch(url))
Promise.all(requests)
.then((resps) => resps.map((response) => response.json()))
.then((jsons) => {
const fetchedProjs = jsons;
this.setState({
projects: fetchedProjs,
DataFetched: true
})
})
Alright, that does gives me some clarity, when i log the value in render() it gives me the array with three objects, but I still dont understand why the three divs are showing up but the text im passing in does not
Try console.loging the project variable from inside of your map and seeing if you are grabbing the right key from the object.
When I try to run your code, by the way, I am getting 404s for those URLs, so I am assuming this is for test purposes only, so then it makes me think you are getting the right amount of response objects in an array, but you might not be getting the values correctly out of them.
<div className="row project" key={`${i}`}>
This can also just be
<div className="row project" key={i}>
but generally it's not a good practice to use iteraror value as a key, so maybe your project object has an id in it? That would be a good value to use for keys - it's unique, consistent and predictable.