TypeError: Impossible de lire la propriété 'Longueur' de ReactJs non définis

J'essaie de créer un site Web avec réagir JS mais j'ai eu une erreur lorsque j'essaie de cliquer sur l'image que je veux laisser un commentaire, il dit TypeError: impossible de lire la propriété de la propriété non définie Est-ce que quelqu'un qui peut m'aider à comprendre, s'il vous plaît!

Ceci est le code. P>

Merci! P>

<div className="content-margined">
    <h2>Reviews</h2>
    {!product.reviews.length & <div>There is no review</div>}
    
    <ul className="review" id="reviews">
        {product.reviews.map((review) => (
            <li key={review._id}>
                <div>{review.name}</div>
                <div>
                    <Rating value={review.rating}></Rating>
                </div>
                <div>{review.createdAt.substring(0, 10)}</div>
                <div>{review.comment}</div>
            </li>
        ))}
        <li>
            <h3>Write A Commnet</h3>
            {userInfo ? (
                <form onSubmit={submitHandler}>
                    <ul className="form-container">
                        <li>
                            <label htmlFor="rating">Rating</label>
                            <select
                                name="rating"
                                id="rating"
                                value={rating}
                                onChange={(e) => setRating(e.target.value)}
                            >
                                <option value="1">1- Poor</option>
                                <option value="2">2- Fair</option>
                                <option value="3">3- Good</option>
                                <option value="4">4- Very Good</option>
                                <option value="5">5- Excelent</option>
                            </select>
                        </li>
                        <li>
                            <label htmlFor="comment">Comment</label>
                            <textarea
                                name="comment"
                                value={comment}
                                onChange={(e) => setComment(e.target.value)}
                            ></textarea>
                        </li>
                        <li>
                            <button type="submit" className="button primary">
                                Submit
                            </button>
                        </li>
                    </ul>
                </form>
            ) : (
                <div>
                    Please <Link to="/signin">Sign-in</Link> to write a review.
                </div>
            )}
        </li>
    </ul>
</div>