TypeError: Cannot read property 'image' of undefined react

Question

this is the place where I am getting an error ie Product.js this finds the id on the product which I am clicking on, from data.js here I am getting the error that is in the title i am not able to understand why it is not getting the data from data.js pls can anyone help me with that?

import React from 'react';
import data from '../data';
import { Link } from 'react-router-dom';
    
function Product(props) {
    console.log(props.match.params.id);
    const product = data.bags.find(x => x._id === props.match.params.id);
    return <div>
        <div className="back-to-result">
            <Link to="/">Back to result</Link>
        </div>
        <div className="details">
            <div className="details-image">
                <img src={product.image} alt="product" /> // getting the error here
            </div>
            <div className="details-info">
                <ul>
                    <li>
                        <h4>{product.brand}</h4>
                    </li>
                    <li>
                        {product.name}
                    </li>
                    <li>
                        {product.ratings} Stars ({product.reviews} Reviews)
                    </li>
                    <li>
                        Price: <b>₹{product.price}</b>
                    </li>
                    <li>
                        Description:
                        <div>
                            {product.description}
                        </div>
                    </li>
                </ul>
            </div>
            <div className="details-action">
                <ul>
                    <li>
                        Price: ₹{product.price}
                    </li>
                    <li>
                        Status: {product.status}
                    </li>
                    <li>
                        Qty: <select>
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </li>
                    <li>
                        <button className="button">Add to cart</button>
                    </li>
                </ul>
            </div>
        </div>

    </div>
}

export default Product;

getting the data from here ie data.js actually this is the redux store where I have stored the data

 export default {
            bags: [
                {
                    _id: '1',
                    category: 'watch',
                    name: "Bags",
                    brand: "Hublot",
                    price: 8000,
                    image: "/images/1.jpg",
                    ratings: 4.5,
                    reviews: 10
                },
                {
                    _id: '2',
                    category: 'bags',
                    name: "Watch",
                    brand: "Ulysse Nardin",
                    price: 10000,
                    image: "/images/2.jpg",
                    ratings: 3.5,
                    reviews: 12
                },
                {
                    _id: '3',
                    category: 'bags',
                    name: "Watch",
                    brand: "Tissot",
                    price: 4000,
                    image: "/images/3.jpg",
                    ratings: 5,
                    reviews: 24
                },
                {
                    _id: '4',
                    category: 'sunglasses',
                    name: "Watch",
                    brand: "Hublot",
                    price: 8000,
                    image: "/images/1.jpg",
                    ratings: 1.4,
                    reviews: 42
                },
                {
                    _id: '5',
                    category: 'bags',
                    name: "Watch",
                    brand: "Ulysse Nardin",
                    price: 10000,
                    image: "/images/2.jpg",
                    ratings: 3.7,
                    reviews: 14
                },
                {
                    _id: '6',
                    category: 'watch',
                    name: "Watch",
                    brand: "Tissot",
                    price: 4000,
                    image: "/images/3.jpg",
                    ratings: 4,
                    reviews: 17
                }
            ]
        }

Answer 1

Wrap your details section like this, to verify that product is defined before trying to access it's properties.

{product &&

    (<div className="details">
        <div className="details-image">
            <img src={product.image} alt="product" /> // getting the error here
        </div>
        <div className="details-info">
            <ul>
                <li>
                    <h4>{product.brand}</h4>
                </li>
                <li>
                    {product.name}
                </li>
                <li>
                    {product.ratings} Stars ({product.reviews} Reviews)
                </li>
                <li>
                    Price: <b>₹{product.price}</b>
                </li>
                <li>
                    Description:
                    <div>
                        {product.description}
                    </div>
                </li>
            </ul>
        </div>
        <div className="details-action">
            <ul>
                <li>
                    Price: ₹{product.price}
                </li>
                <li>
                    Status: {product.status}
                </li>
                <li>
                    Qty: <select>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </li>
                <li>
                    <button className="button">Add to cart</button>
                </li>
            </ul>
        </div>
    </div>)
}

Answer 2

The line:

const product = data.bags.find(x => x.id === props.match.params.id);

might result in the product being undefined .

If that's the case, you then can't access any of the fields you were expecting, which is causing the error.

After that line, put if (!product) return <p>Product Not Found</p> , which will return early and not cause the error if product is undefined or empty, but a product has been found then it will continue on and render as normal.

---

Also, your find is looking at the wrong field name. In your data snippet, the items have the _id field, not the id field, you your find should look like:

data.bags.find(x => x._id === props.match.params.id)