# 🏅Day29 - React 元件練習 (6) - 隨堂測驗

# 隨堂測驗
請根據下面題目來完成測驗

## 題目
1. 請將產品利用元件的方式拆出來，並且將資料傳入呈現在畫面上。
2. 請將頁籤區塊拆成元件，並且呈現在畫面上 ( 功能不需要做 )。

請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/mdNaWoK?editors=1011)，並且完成以下條件：

<!-- 解答：
function ProductCard({ product }) {
return (
<div className="col-md-4 mb-3">
<div className="card">
<img src={product.imageUrl} className="card-img-top primary-image" alt="主圖" />
<div className="card-body">
<h5 className="card-title">
{product.title}
<span className="badge bg-primary ms-2">{product.category}</span>
</h5>
<p className="card-text">商品描述：{product.description}</p>
<p className="card-text">商品內容：{product.content}</p>
<div className="d-flex">
<p className="card-text text-secondary">
<del>{product.origin_price}</del>
</p>
&nbsp;元 / {product.price} 元
</div>
</div>
</div>
</div>
);
}

function Pagination(){
return (
<nav aria-label="Page navigation example">
<ul className="pagination">
<li className="page-item"><a className="page-link" href="#">Previous</a></li>
<li className="page-item"><a className="page-link" href="#">1</a></li>
<li className="page-item"><a className="page-link" href="#">2</a></li>
<li className="page-item"><a className="page-link" href="#">3</a></li>
<li className="page-item"><a className="page-link" href="#">Next</a></li>
</ul>
</nav>
)
}

function Example() {
const [products, setProducts] = React.useState([
{
category: "甜甜圈",
content: "尺寸：14x14cm",
description: "濃郁的草莓風味，中心填入滑順不膩口的卡士達內餡，帶來滿滿幸福感！",
id: "-L9tH8jxVb2Ka_DYPwng",
is_enabled: 1,
origin_price: 150,
price: 99,
title: "草莓莓果夾心圈",
unit: "元",
num: 10,
imageUrl: "https://images.unsplash.com/photo-1583182332473-b31ba08929c8",
},
{
category: "蛋糕",
content: "尺寸：6寸",
description: "蜜蜂蜜蛋糕，夾層夾上酸酸甜甜的檸檬餡，清爽可口的滋味讓人口水直流！",
id: "-McJ-VvcwfN1_Ye_NtVA",
is_enabled: 16,
origin_price: 1000,
price: 900,
title: "蜂蜜檸檬蛋糕",
unit: "個",
num: 1,
imageUrl: "https://images.unsplash.com/photo-1627834377411-8da5f4f09de8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1001&q=80",
imagesUrl: [
"https://images.unsplash.com/photo-1618888007540-2bdead974bbb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=987&q=80",
],
},
{
category: "蛋糕",
content: "尺寸：6寸",
description: "法式煎薄餅加上濃郁可可醬，呈現經典的美味及口感。",
id: "-McJ-VyqaFlLzUMmpPpm",
is_enabled: 1,
origin_price: 700,
price: 600,
title: "暗黑千層",
unit: "個",
num: 15,
imageUrl: "https://images.unsplash.com/photo-1505253149613-112d21d9f6a9?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDZ8fGNha2V8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60",
imagesUrl: [
"https://images.unsplash.com/flagged/photo-1557234985-425e10c9d7f1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA5fHxjYWtlfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60",
"https://images.unsplash.com/photo-1540337706094-da10342c93d8?ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDR8fGNha2V8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=60"
]
}
]);

return (
<div className="container">
<div className="row">
{products.map((product) => (
<ProductCard key={product.id} product={product} />
))}
<Pagination />
</div>
</div>
);
}

ReactDOM.createRoot(document.getElementById("root")).render(<Example />);
-->

| Name | Codepen |
| -------- | -------- |
| Mikka | [codepen](https://codepen.io/Miikaa/pen/KwMNxaR) |
| 7lun | [codepen](https://codepen.io/mfyvqhsn-the-bold/pen/GgqmBgQ) |
| Rogan | [codepen](https://codepen.io/RoganHsu/pen/QwEgQBm?editors=1011) |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/QwEgQzr?editors=1111)|
| RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/vEKZRxJ?editors=0010)|
| Tetsu |[Codepen](https://codepen.io/ttgchang/pen/pvbwLrm)|
| Melanie |[Codepen](https://codepen.io/pnrcspte-the-animator/pen/EayXEvP)|
| 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/vEKZRVR?editors=0011)|
| Chia |[Codepen](https://codepen.io/Chia-the-encoder/pen/azZwYRp)|
| Jin |[Codepen](https://codepen.io/Jin-L/pen/vEKZjzM)|
| Marco |[Codepen](https://codepen.io/MarcoChiu/pen/RNRgJoP)|
| cks40660 |[Codepen](https://codepen.io/CKS40660/pen/QwEgBwV)|
| KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/bNeRvLO?editors=0010)|
| Eileen |[Codepen](https://codepen.io/Eileen-io/pen/pvbwOzJ)|
| 叮咚 |[Codepen](https://codepen.io/pinchieh-lin/pen/XJKgPrN?editors=1010)|
| 社子畢卡索 |[Codepen](https://codepen.io/pen?template=dPXRgYB)|
| 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/azZwQNO?editors=0010)|
| Eric | [Codepen](https://codepen.io/wc-su/pen/emzRbmd) |
| Percy | [Codepen](https://codepen.io/Percy-Ku/pen/LEZxOEQ) |
| Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/raLwPZP?editors=0010) |
| 平平 | [Codepen](https://codepen.io/ypinpin/pen/LEZLvYO) |
| kashiwatei | [Codepen](https://codepen.io/kashiwatei/pen/GgqEePG?editors=1011) |
| 7Red | [Codepen](https://codepen.io/cch2655/pen/bNeRJoG) |
| andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/myEwYgR?editors=0010) |
| wind | [Codepen](https://codepen.io/wind7y/pen/KwMvPmy) |
| 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/RNRZrXz?editors=0011) |
|ZoeKang|[Codepen](https://codepen.io/byehywmx-the-animator/pen/RNRZRYx)|
|舜仁|[Codepen](https://codepen.io/shunjen/pen/KwMvNWX)|
|小趴|[Codepen](https://codepen.io/papa2415/pen/myEMOBe)|
| Jenna |[Codepen](https://codepen.io/abiscc14/pen/KwMvGBZ)|
| JiaMori |[Codepen](https://codepen.io/jiamori/pen/bNeYyZp)|
|TWLeoC|[Codepan](https://codepen.io/TWLeoC/pen/vEKpJpZ?editors=0012)|
| Wen |[Codepen](https://codepen.io/hsiao-kevin/pen/jErxQEj?editors=1011)|