ReactJS - TypeError: Cannot read property 'name' of undefined but it is

Question

I have a map function that is supposed to take the data from an list I've created and show it to the user but it give me a typerror whenever I try to do that, here's my map function:

{product.map((item, idx)=>
            <div key={idx}>
                    <h3 className='productName'>{item[idx].name}</h3>
                    <div className='productImageContainer'>
                        <img src={item[idx].image}></img>
                    </div>
                    <span className='productPrice'><strong>${item[idx].Price}.00</strong></span>
                    <br></br>
                    <Button className='removeProductButton' variant='danger'><MdCancel></MdCancel> Remove</Button>

            </div>)}

And here's the piece of code where I attach the items to the array:

    const [product, getProduct]= useState([])
const getProducts=()=>
{
    let X = JSON.parse(localStorage.getItem('products'))
    getProduct([...product, X])
}

I get the following error: "TypeError: Cannot read property 'name' of undefined", I've tried manually console logging each element of the list and it is definitely not undefined, why is that happening and how can I fix it?

dwosk · Accepted Answer · 2020-10-05 20:29:19Z

1

You can access the name property directly on item like so:

<h3 className='productName'>{item.name}</h3>

item is the current element that is being processed in your list.

edited Oct 5, 2020 at 20:29

answered Oct 5, 2020 at 20:28

dwosk

1,2578 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Python_Mython79 Over a year ago

I've tried doing that, but whenever I do it it doesn't really show anyhing unless I index it

Guillaume Munsch Over a year ago

The answer is correct though. Check your products

dwosk Over a year ago

Most likely your products list isn't what you think it is. Doing item[idx].name isn't going to work.

Python_Mython79 Over a year ago

I'll look into it

Python_Mython79 Over a year ago

Hmm, yeah, apparently the product list is, for some obscure to me at least, reason empty even after I append those value to it, hmm. Thank you for the cooperation though

|

lioncodes · Accepted Answer · 2020-10-05 21:17:40Z

When you are mapping through an array you are already going through each element, that is what the 'item' field in your code is. It is the each individual item from the array that you're mapping.

Now coming to why it throws up the error: When you are mapping through an array and you are inside a particular item, and you try to do item[idX].name, it is trying to find the object with the key of value idX in your case which is undefined and since it is undefined it throws up the error that it cannot read the property 'name' (which you're trying to access) of undefined.

Solution:

simply do {item.name} to access name of the item object (the object of the particular iteration you're on).
you can destructure the things that you want from item as well to make your code look clear. ref: https://dmitripavlutin.com/javascript-object-destructuring/

Hope this clears your doubt :)

Collectives™ on Stack Overflow

ReactJS - TypeError: Cannot read property 'name' of undefined but it is

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related