search

basir / node-react-ecommerce

Build ECommerce Website Like Amazon By React & Node & MongoDB
https://node-react-ecommerce-app.herokuapp.com/
1.69k stars 793 forks source link

Cannot read property 'name' of undefined #60

Closed RuiLopes98 closed 4 years ago

RuiLopes98 commented 4 years ago

Hey there again.

I'm at this time https://youtu.be/Fy9SdZLBTOo?t=4638

And when I compile, the terminal says it was successfully compiled and when I check the react app, I get this error

error_cannot_read

My ProductScreen.js is:

import React from 'react';
import data from '../data';

function ProductScreen(props) {
    console.log(props.match.params.id);
    const product = data.products.find(x => x._id === props.match.params.id);
    return <div>
        <h1> {product.name} </h1>
    </div>
}

export default ProductScreen;

And my data.js is:

export default {
    products: [
        {
            _id: 1,
            name: 'Cozido 1',
            category: 'meals',
            image: '/images/d1.jpg',
            price: 50,
            description: 'asdasdsadasdas',
            rating: 4.0,
            numReviews: 10            
        },

        {
            _id: 2,
            name: 'Cozido 2',
            category: 'meals',
            image: '/images/d1.jpg',
            price: 51,
            description: '1asdasdsadasdas',
            rating: 4.2,
            numReviews: 11         
        },

        {
            _id: 3,
            name: 'Cozido 3',
            category: 'desserts',
            image: '/images/d1.jpg',
            price: 53,
            description: '3asdasdsadasdas',
            rating: 4.235,
            numReviews: 102            
        },
    ]      
}
basir commented 4 years ago

hello there

what is output of console.log(props.match.params.id);? also ask your questions here: https://discord.gg/jX8BVRn

On Tue, Jun 23, 2020 at 1:30 PM Rui Lopes notifications@github.com wrote:

Hey there again.

I'm at this time https://youtu.be/Fy9SdZLBTOo?t=4638

And when I compile, the terminal says it was successfully compiled and when I check the react app, I get this error

[image: error_cannot_read] https://user-images.githubusercontent.com/67196990/85382927-57dab080-b537-11ea-97f4-904133e0d180.png

My ProductScreen.js is:

import React from 'react'; import data from '../data';

function ProductScreen(props) { console.log(props.match.params.id); const product = data.products.find(x => x._id === props.match.params.id); return

{product.name} 

</div>

}

export default ProductScreen;

And my data.js is:

export default { products: [ { _id: 1, name: 'Cozido 1', category: 'meals', image: '/images/d1.jpg', price: 50, description: 'asdasdsadasdas', rating: 4.0, numReviews: 10 },

    {
        _id: 2,
        name: 'Cozido 2',
        category: 'meals',
        image: '/images/d1.jpg',
        price: 51,
        description: '1asdasdsadasdas',
        rating: 4.2,
        numReviews: 11
    },

    {
        _id: 3,
        name: 'Cozido 3',
        category: 'desserts',
        image: '/images/d1.jpg',
        price: 53,
        description: '3asdasdsadasdas',
        rating: 4.235,
        numReviews: 102
    },
]

}

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/basir/node-react-ecommerce/issues/60, or unsubscribe https://github.com/notifications/unsubscribe-auth/AATUFQ6WS2NZ3XYVYPF73JTRYBVJ5ANCNFSM4OFOIWXQ .

RuiLopes98 commented 4 years ago

hello there what is output of console.log(props.match.params.id);? also ask your questions here: https://discord.gg/jX8BVRn … On Tue, Jun 23, 2020 at 1:30 PM Rui Lopes @.***> wrote: Hey there again. I'm at this time https://youtu.be/Fy9SdZLBTOo?t=4638 And when I compile, the terminal says it was successfully compiled and when I check the react app, I get this error [image: error_cannot_read] https://user-images.githubusercontent.com/67196990/85382927-57dab080-b537-11ea-97f4-904133e0d180.png My ProductScreen.js is: import React from 'react'; import data from '../data'; function ProductScreen(props) { console.log(props.match.params.id); const product = data.products.find(x => x._id === props.match.params.id); return

{product.name}

} export default ProductScreen; And my data.js is: export default { products: [ { _id: 1, name: 'Cozido 1', category: 'meals', image: '/images/d1.jpg', price: 50, description: 'asdasdsadasdas', rating: 4.0, numReviews: 10 }, { _id: 2, name: 'Cozido 2', category: 'meals', image: '/images/d1.jpg', price: 51, description: '1asdasdsadasdas', rating: 4.2, numReviews: 11 }, { _id: 3, name: 'Cozido 3', category: 'desserts', image: '/images/d1.jpg', price: 53, description: '3asdasdsadasdas', rating: 4.235, numReviews: 102 }, ] } — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#60>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AATUFQ6WS2NZ3XYVYPF73JTRYBVJ5ANCNFSM4OFOIWXQ .

This is what I get when I check the console in the error page: 1 2

basir commented 4 years ago

make sure you have products with id 1 and they are same type

On Tue, Jun 23, 2020 at 1:38 PM Rui Lopes notifications@github.com wrote:

hello there what is output of console.log(props.match.params.id);? also ask your questions here: https://discord.gg/jX8BVRn … <#m_-6996758733530752811_m5270389061157605749> On Tue, Jun 23, 2020 at 1:30 PM Rui Lopes @.***> wrote: Hey there again. I'm at this time https://youtu.be/Fy9SdZLBTOo?t=4638 And when I compile, the terminal says it was successfully compiled and when I check the react app, I get this error [image: error_cannot_read] https://user-images.githubusercontent.com/67196990/85382927-57dab080-b537-11ea-97f4-904133e0d180.png My ProductScreen.js is: import React from 'react'; import data from '../data'; function ProductScreen(props) { console.log( props.match.params.id); const product = data.products.find(x => x._id === props.match.params.id); return {product.name} } export default ProductScreen; And my data.js is: export default { products: [ { _id: 1, name: 'Cozido 1', category: 'meals', image: '/images/d1.jpg', price: 50, description: 'asdasdsadasdas', rating: 4.0, numReviews: 10 }, { _id: 2, name: 'Cozido 2', category: 'meals', image: '/images/d1.jpg', price: 51, description: '1asdasdsadasdas', rating: 4.2, numReviews: 11 }, { _id: 3, name: 'Cozido 3', category: 'desserts', image: '/images/d1.jpg', price: 53, description: '3asdasdsadasdas', rating: 4.235, numReviews: 102 }, ] } — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#60 https://github.com/basir/node-react-ecommerce/issues/60>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AATUFQ6WS2NZ3XYVYPF73JTRYBVJ5ANCNFSM4OFOIWXQ .

This is what I get when I check the console in the error page: [image: 1] https://user-images.githubusercontent.com/67196990/85384857-7cd02300-b539-11ea-9d1a-176c5ec7f72c.png [image: 2] https://user-images.githubusercontent.com/67196990/85384867-8063aa00-b539-11ea-92da-b22959fc55f4.png

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/basir/node-react-ecommerce/issues/60#issuecomment-648013801, or unsubscribe https://github.com/notifications/unsubscribe-auth/AATUFQZXR2DDGBLM6UJ5UI3RYBWKLANCNFSM4OFOIWXQ .