React Redux: Can View Props In Browser Console, But Return Undefined When Rendered

I am having a problem rendering the props value in react. I have added data fetched from an API to a redux store, and then mapped the state to my App component. The data shows up

Solution 1:

Reason is, you are fetching the data from api, until you didn't get the response {this.props.products.item} will be undefined, because render will get executed before you get the response. So either you need to hold the rendering by using some bool until you didn't get the response or put the check, like this:

{this.props.products.items && this.props.products.items[0].title}

Solution 2:

If the previous answer is not working, the only thing I can think of is that items may exist as an empty array, in the form of this.props.products.items = []

Try:

{
  this.props.products.items &&
  this.props.products.items.length > 0 &&
  this.props.products.items[0].title
}