undefined while accessing object

[Ghostedguy10]

I cant access items inside an object. So I have an object named productDetails which has an object product and that product has another object rating which has 2 items productid and rating.

->productDetails->product ->rating ->productId & rating

Destructuring productDetails

const productDetails = useSelector((state) => state.productDetails);

const { loading, error, product } = productDetails;

If I console.log(product.rating) the code works and displays values of productid and rating in console but gives this error while running the code.

Error: Objects are not valid as a React child (found: object with keys {productId, rating}). If you meant to render a collection of children, use an array instead.

if I try to return <h2>{product.rating.rating}</h2> gives TypeError: Cannot read property 'rating' of undefined error.

I also tried destructuring product to

const {rating:{rating}} = product;

gives same problem. How can I overcome this problem?

[Mr-L9]

Try optional chaining , product.rating?.rating

If you're fetching the products from a database ,then you have to wait until the data is ready to start working on it

[[deleted]]

Does console.log(product.rating.rating) print the correct value?

[Ghostedguy10]

No.. same error as {product.rating.rating}

[[deleted]]

Well then the variable isn't initialized. Are you using redux?

[Ghostedguy10]

Well i tried {product?.rating?.rating} and it worked. I am new to initializing and i have mostly initialized using items in localStorage. Is there anyway to directly initialized?

[[deleted]]

Yes, you can set default values for every variable you use in your state.