React unable to rerender after setState using Fetch - json

Question

I'm at my wits end. I'm a coding novice trying to use .map() to iterate through JSON data and display it in a card on React.
I fetch the data under componentDidMount() and use setState to assign it. This works completely fine on another page.
However, on this page I am trying to iterate through the 'projects' array on this object, but whenever I try to .map() into the products array I get errors.
Even with a simple console.log I get errors.
I think this has to do with asynchronous fetching but all the questions I see address this with setState(). I don't know what to do.
Here is my JSON object:
{
"_id": "59dac308b9267fbcb5d2de32",
"name": "The Jewelry Counter",
"description": "Limited edition fine jewelry, handcrafted in the USA",
"image": "/public/images/tjclogo.png",
"__v": 0,
"products": [
{
"_id": "59dada32b9267fbcb5d2de37",
"name": "Opal and cubic zirconia stacking ring set",
"price": 80,
"description": "A three ring stacking set that features an arced ring with an opal and cz, one with just glowing cz's and one with a single solitaire prong set opal.",
"img": "/shopping-cart-app/public/images/ringset.png",
"quantity": 2,
"__v": 0,
"keywords": [
"ring",
"opal",
"cubic zirconia",
"cz",
"jewelry",
"womens",
"jewelry counter"
]
},
{
"_id": "59dadae1b9267fbcb5d2de38",
"name": "Moonstone Ear Jackets",
"price": 140,
"description": "Four teardrop shaped glowing moonstones are prong set and attach to your ear in a simple three piece process that makes it look as though they are floating on your ears.",
"img": "/shopping-cart-app/public/images/moonearrings.png",
"quantity": 4,
"__v": 0,
"keywords": [
"earrings",
"moonstone",
"jewelry",
"womens",
"jewelry counter"
]
},
{
"_id": "59dadb79b9267fbcb5d2de39",
"name": "Horizontal Pyrite Necklace",
"price": 52,
"description": "A horizontal bar of hand crushed pyrite is attached to a brass bar on a 16\" brass chain.",
"img": "/shopping-cart-app/public/images/pyritenecklace.jpg",
"quantity": 1,
"__v": 0,
"keywords": [
"necklace",
"pyrite",
"jewelry",
"womens",
"jewelry counter"
]
},
{
"_id": "59dadcfbb9267fbcb5d2de3a",
"name": "Purple Tourmaline Promise Rings",
"price": 48,
"description": "Faceted purple tourmaline prong set on an 18K yellow gold vermeil band. This simple ring is perfect for stacking.",
"img": "/shopping-cart-app/public/images/ring.jpg",
"quantity": 1,
"__v": 0,
"keywords": [
"ring",
"tourmaline",
"jewelry",
"womens",
"jewelry counter"
]
}
]
}
I have the following code:
import React, { Component } from 'react';
import StoreCard from '../../StoreCard';
import ProductCard from '../../ProductCard';
import Wrapper from '../../Wrapper';
import Header from '../../Header';
import StoreLogin from "../../StoreLogin";
import Store from "../../Store";
import './Shop.css';
class Shop extends Component {
constructor(props) {
super(props);
this.state = { storeInfo: []};
}
// state = {storeInfo: [],
// products: []
// };
componentDidMount() {
fetch('/stores/59dac308b9267fbcb5d2de32')
.then(res => res.json())
.then((storeInfo) => {this.setState({ storeInfo: storeInfo })})
}
render() {
console.log(this.state.storeInfo) // works,displays the entire JSON object after beig called twice in the console.
console.log(this.state.storeInfo.name); // WORKS, same as above
console.log(this.state.storeInfo['products'][1]['name']); //DOES NOT WORK - ERRORS
// console.log(this.state.storeInfo.products[1].name); //DOES NOT WORK - ERRORS
return (
<div>
<Header location="Search all stores"/>
<Wrapper>
<StoreLogin
id={this.state.storeInfo._id} // works
userName={this.state.storeInfo.name} // works
// productName={this.state.storeInfo.products[1].name} //does not work
>
</StoreLogin>
</Wrapper>
<h1>Shop</h1>
</div>
);
}
}
export default Shop;
When I uncomment the 'console.logs' and the 'productName' in the storeLogin component one at a time, I get 3 errors:
Uncaught TypeError: Cannot read property '1' of undefined
Then
proxyConsole.js:54 The above error occurred in the <Shop> component:
in Shop (created by Route)
in Route (at App.js:22)
in div (at App.js:19)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:17)
in App (at index.js:6)
Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
And then
Uncaught TypeError: Cannot read property '1' of undefined
again.

Answer 1

The reason is data you are trying to access storeInfo['products'][1]['name'] is not yet available in the render function initially.So you need to check if data is present.For that what you can do is
render() {
console.log(this.state.storeInfo.name); // WORKS
//Move this console inside if
if ( this.state.storeInfo.products && this.state.storeInfo.products.length) {
console.log(this.state.storeInfo['products'][1]['name']);
console.log(this.state.storeInfo.products[0].name);
}
return (
<div>
<Header location="Search all stores"/>
<Wrapper>
<StoreLogin
id={this.state.storeInfo._id} // works
userName={this.state.storeInfo.name} // works
productName={this.state.storeInfo.products && this.state.storeInfo.products.length &&
this.state.storeInfo.products[0].name} //<-- Same here
>
</StoreLogin>
</Wrapper>
<h1>Shop</h1>
</div>
);
}

Answer 2

The problem is that, you are having a fetchRequest in the componentDidMount function and then setting the state, however your render is called before it and since you try to access this.state.storeInfo.products[0].name, this.state.storeInfo.products is undefined and hence you get an error, do a check before using it
return (
<div>
<Header location="Search all stores"/>
<Wrapper>
<StoreLogin
id={this.state.storeInfo._id} // works
userName={this.state.storeInfo.name} // works
productName={this.state.storeInfo.products && his.state.storeInfo.products[0]?
this.state.storeInfo.products[0].name: ''}
>