'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 |
---|