Before we create our Tabs compound component, let's add reviews to the product page:

1. First, we need to add an interface for the review data structure in ProductsData.ts:

export interface IReview {
  comment: string;
  reviewer: string;
}

2. We can now add reviews to our product interface :

export interface IProduct {
  ...
  reviews: IReview[];
}

3. We can now add reviews to our product data array:

const products: IProduct[] = [
  {
    id: 1,
    ...
    reviews: [
      {
        comment: "Excellent! This does everything I want",
        reviewer: "Billy"
      },
      { comment: "The best router I've ever worked with", reviewer: 
      "Sally" }
    ]
  },
  {
    id: 2,
    ..
    reviews: [
      {
        comment: "I've found this really useful in a large app I'm 
        working on",
        reviewer: "Billy"
      },
      {
        comment: "A bit confusing at first but simple when you get   
        used to it",
        reviewer: "Sally"
      }
    ]
  },
  {
    id: 3,
    ..
    reviews: [
      {
        comment: "I'll never work with a REST API again!",
        reviewer: "Billy"
      },
      {
        comment: "It makes working with GraphQL backends a breeze",
        reviewer: "Sally"
      }
    ]
  }
];

So, we add a reviews property to each product that is an array of reviews. Each review is an object containing comment and reviewer properties as defined by the IReview interface.

4. With our data in place, let's add the reviews to our Product component after the description:

<p>{product.description}</p>
<div>
  <ul className="product-reviews">
    {product.reviews.map(review => (
      <li key={review.reviewer} className="product-reviews-item">
        <i>"{review.comment}"</i> - {review.reviewer}
      </li>
    ))}
  </ul>
</div>
<p className="product-price">
  ...
</p>

So, we are using the map function on the reviews array to display comment and reviewer in a list.

5. We have referenced some new CSS classes, so let's add these into index.css:

.product-reviews {
  list-style: none;
  padding: 0px;
}
.product-reviews .product-reviews-item {
  display: block;
  padding: 8px 0px;
}

If we look at the running app and go to a product, we'll now see the reviews:

Now that we have added the reviews, we can work on our Tabs component in the next section.