It's Showing cannot read properties of undefined reading name

Question

const page = (props) => {
    const slug = props.params.id
    // console.log(slug)
    const [showModal, setShowModal] = useState(false)
    // const [pDetail, setPDetail] = useState(null)
    let prod

    useEffect(() => {
        fetchProductDetail()
    }, [])
    const fetchProductDetail = async () => {
        const { data } = await fetchDataFromApi(`/api/products?populate=*&[filters][slug][$eq]=${slug}`)
        console.log(data[0])
        prod = data?.[0].attributes
    }

    return (
        <div className={styles.productDetailPage}>

            <div className={styles.productDPageTop}>
                <div className={styles.productSearch}>
                    <BiSearchAlt size={20} />
                    <input type="text" placeholder='Search Products' />
                </div>
                <div className={styles.productCategory}>
                    Category <BiChevronDown />
                </div>
            </div>

            <div className={styles.productDPageMiddle}>
                <div className={styles.pdpmBack}><div className={styles.backIcon}><BiLeftArrowAlt /></div>Go Back To<Link href="#">Beam light Series</Link></div>
                <div className={styles.pdpmMain}>
                    <div className={styles.pdpmmLeft}>
                        <img src="/img/product.png" alt="" />
                        <div className={styles.pdpmmlImgList}>
                            <img src="/img/product.png" alt="" />
                            <img src="/img/product.png" alt="" />
                            <img src="/img/product.png" alt="" />
                            <img src="/img/product.png" alt="" />
                            <img src="/img/product.png" alt="" />
                            <img src="/img/product.png" alt="" />
                            <img src="/img/product.png" alt="" />
                        </div>
                    </div>
                    <div className={styles.pdpmmRight}>
                        <div className={styles.pdpmmrDes}>
                            <div className={styles.pdpmmrdHead}>{prod.name}</div>
                            <div className={styles.pdpmmrdCat}>
                                <span>Category</span>
                                <div>Architectural Lights</div>
                            </div>
                            <div className={styles.pdpmmrdDes}>
                                <span>Description</span>
                                <div>Lorem ipsum dolor sit amet consectetur. Risus fusce faucibus ullamcorper at quam id augue id. Consectetur vel ac cras augue dui justo orci. Luctus tincidunt vel vulputate nulla tincidunt maecenas. In consequat cursus velit vel vulputate nulla tincidunt maecenas. In consequat cursus velit . <Link href="#">Download PDF</Link></div>
                            </div>
                        </div>
                        <div className={styles.pdpmmrWatt}>
                            <div className={styles.pdpmmrwBtn}>120 W</div>
                            <div className={styles.pdpmmrwBtn}>150 W</div>
                            <div className={styles.pdpmmrwBtn}>200 W</div>
                        </div>
                        <div className={styles.pdpmmrBtn}>
                            <div className={styles.pdpmmrbTop}>
                                <div className={styles.pdpmmrbtWhatsapp}><FaWhatsapp />Whatsapp</div>
                                <div className={styles.pdpmmrbtEnquire} onClick={() => setShowModal(true)}>Enquire</div>
                            </div>
                            <div className={styles.pdpmmrbBottom}>Preferred to call ? <span>Call Now <BiPhoneCall /></span></div>
                        </div>
                    </div>
                </div>
            </div>

            <div className={styles.product}>
                <Heading className={styles.heading} text="Related Products" />
                <div className={styles.productWrap}>
                    <ProductCard />
                    <ProductCard />
                    <ProductCard />
                </div>
                <div className={styles.viewBtnWrap}><div className={styles.viewBtn}>View All</div></div>
            </div>

            {showModal && (<Modal closeModal={() => setShowModal(false)} />)}

        </div>
    )
}

export default page

In the above problem data[0] is consoled but when i try to show in name it's showing error

I am trying to show the products detail using the slug from the url in search bar and the request is also made but dont know why its showing error while fetching the product details from strapi please anyone help me

It's Showing cannot read properties of undefined reading name

0 Answers0