CODEWITHSUNDEEP
javascriptreactjsreact-redux
user16735212
user16735212

Reputation:

How to solve this: TypeError: Cannot destructure property 'title' of 'collections' as it is undefined

This is the data that I fetched from firestore and I want to use it in my application to show the product details but I can't retrieve it into my application. Example, I want the data from shop->collections->bags->items to show the specific product details.

data fetched

And here is my code in product-details.component.jsx:

import React, { useEffect, useState } from "react";
import { connect } from "react-redux";

import { fetchCollectionsStart } from '../../redux/shop/shop.actions'


const ProductDetailsPage = ({ fetchCollectionsStart, match, collections }) => {

    const {title, items} = collections;

    useEffect(() => {
        fetchCollectionsStart();
    }, [fetchCollectionsStart]);

    console.log(match);

    const ShowProduct = () => {
        return (
            <div>
                {title}
            </div>
        )
    }

    return (
        <div className='product-details'>
            <div className="row">
                <ShowProduct />
            </div>
        </div>
    );

};

const mapDispatchToProps = dispatch => ({
    fetchCollectionsStart: () => dispatch(fetchCollectionsStart())
});

export default connect(null, mapDispatchToProps)(ProductDetailsPage);

The error pop up is shown as the image below: Error

I don't know why I can't destructure the data from collections. I thought I already successfully fetched it into my application? Thanks a lot for helping me!!

Upvotes: 0

Views: 3335

Answers (1)

Colleen
Colleen

Reputation: 48

You need to destructure bags and then get the title from bags.

const { bags } = collections;
console.log(bags.title)

If you dont know whats in collections - you can use Object.keys() to get the different object keys- bags, boys, girls, hats etc.

Upvotes: 1

Related Questions