I have a container component that is fetching data and passing the props down to its children via re-rendering its own state with the data that is returned from my API call. The issue I am facing resides in the following function:
componentDidUpdate(prevProps, prevState){
console.log(this.props.photos);
console.log(this.props.photos.allPhotos);
if (this.props.photos!== prevProps.photos){
console.log(this.props.photos);
console.log(this.props.photos.allPhotos);
}
}
In this screenshot:
I would expect the value of
this.props.photos.allPhotos
to be empty, as it appears to be in the console.log(this.props.photos.allPhotos)
statement however....
upon expanding the object within the console, i then see values for all the fields I want to use...
I have no idea why this happens, or how to work around this. Hopefully someone else has come across this before.