'Cannot render or access nested object in MERN app with redux

In my MERN app, I'm querying and getting data from my reducer plus an object from my MongoDb, such as (simplified here):

import { useSelector } from 'react-redux';

const {
  isLoading,
  isSuccess,
  isError,
  message,
  book: {
    title,
    subtitle,
    composer, <= object
  },
} = useSelector((state) => state.books);

So that book object contains a nested composer object.

I'm putting it in the state (I'm using Redux) and as soon as I dispatch my getBook(bookId) function I have the object in my state.

I can access and render the title, subtitle, and other shallow keys.

However, when I want to destructure the composer nested object, I get undefined for all of its key/value pairs.

I seriously don't understand why. If I just look in my redux dev tools, I see that the nested object is there. But when I try to render composer.surname in the return, it comes as undefined and breaks the app.

What could I be doing wrong?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source