Individual reviews display with required information (author, rating, date, content)

A review component that omits the author name, submission date, star rating, or review text fails to meet the minimum data required for schema.org Review markup (see ecommerce-reviews.schema-seo.review-schema), which costs rich-snippet eligibility. Beyond SEO, shoppers use date and author identity to gauge review credibility — an undated review from an anonymous source with no star rating carries near-zero trust weight. Inconsistent field sets across review components also break JSON-LD generation downstream: if some ReviewItem instances omit datePublished or reviewRating, the structured data output will be incomplete for a subset of products.

Build a single canonical review component in components/ReviewItem.tsx that renders all four required fields — author, date, rating, and text — with graceful fallbacks.

// components/ReviewItem.tsx
import { formatDate } from '@/lib/format'

export function ReviewItem({ review }: { review: Review }) {
  return (
    <article className="review" itemScope itemType="https://schema.org/Review">
      <header className="review-header">
        <strong itemProp="author">{review.author_name ?? 'Anonymous'}</strong>
        <time dateTime={review.created_at.toISOString()} itemProp="datePublished">
          {formatDate(review.created_at)}
        </time>
        <StarDisplay rating={review.rating} />
      </header>
      <p itemProp="reviewBody">{review.text}</p>
    </article>
  )
}

Use a single component across all product pages — never inline the review template in multiple places where fields can diverge.