No error indicated but the product is not displayed

1

hi I’m trying to access an array of object like this ( {product.name} ) and get this type of error in reactjs

TypeError: Cannot read property ‘name’ of undefined

here’s the code

import React from "react";
import { Link } from "react-router-dom";
import { Row, Col, Image, ListGroup } from "react-bootstrap";
import Rating from "../components/Rating";
import products from "../products";

function ProductScreen({ match }) {
  const product = products.find((p) => p._id === match.params.id);
  
  return (
    <div>
      <Link to="/" className="btn btn-light my-3">
        Revenir en Arrière
      </Link>
      <Row>
        <Col md={6}>
          <Image src={product.image} alt={product.name} fluid />
        </Col>
        <Col md={3}>
          <ListGroup variant="flush">
            <ListGroup.Item>
              <h3>{product.name}</h3>
            </ListGroup.Item>

            <ListGroup.Item>
              <Rating
                value={product.rating}
                text={`${product.numReviews} commentaires`}
                color={`#fb3d28`}
              />
            </ListGroup.Item>

            <ListGroup.Item>Prix: {product.price}€</ListGroup.Item>

            <ListGroup.Item>Description: {product.description}</ListGroup.Item>
          </ListGroup>
        </Col>
      </Row>
    </div>
  );
}

export default ProductScreen;
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.