Compound components are a set of components that work together. We are going to use this pattern to create a reusable tab component for use on the product page to separate reviews the product descriptions.
Compound components
Adding reviews to a product
Before we create our Tabs compound component, let's add reviews to the product page:
- First, we need to add an interface for the review data structure in ProductsData.ts:
export interface IReview {
comment: string;
reviewer: string;
}
- We can now add reviews to our product interface :
export interface IProduct {
...
reviews: IReview[];
}
- We can now add reviews to our product data array:
const products: IProduct[] = [
{
id: 1,
...
reviews: [
{
...