---
# System prepended metadata

title: "\U0001F3C5Day29 - React 元件練習 (6) - 隨堂測驗"
tags: [React 直播班 - 2024 冬季班]

---

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

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

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


## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
![](https://i.imgur.com/vftL5i0.png)

<!-- 解答： 
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 />);
-->

回報區
---
|  #  | Discord        | CodePen / 答案                                                                |
|:---:|:-------------- |:----------------------------------------------------------------------------- |
| 1 | MY | [Codepen](https://codepen.io/ahmomoz/pen/yyBzaLb?editors=1010) |
| 2 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/EaYevoM?editors=1011) |
| 3 | Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/raBZKJV?editors=1010) |
| 4 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/OPLBzby) |
| 5 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/XJrxVVB) |
| 6 | Satar | [Codepen](https://codepen.io/SatarKuo/pen/PwYyEdG?editors=0010) |
| 7 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/pvzxpLp?editors=0011) |
| 8 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/ZYzqvqj) |
| 9 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/ZYzqvdq?editors=1010) |
| 10 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/LEPgQPY) |
|11|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/zxOmROX?editors=1011)|
| 12 | Nocab |[CodePen](https://codepen.io/PeihanWang/pen/bNbmLNY?editors=1010)|
| 13 | Aaron 謝宗佑 |[CodePen](https://codepen.io/aaron-hsieh/pen/EaYdQWY)|
| 14 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/mybzXOW?editors=0011)|
| 15 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/PwYyQOE?editors=0011)|
| 16 | Clove | [Codepen](https://codesandbox.io/p/sandbox/day29-react-yuan-jian-lian-xi-6-sui-tang-ce-yan-93fk76) |
| 17 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/YPKJLJP?editors=1010) |
| 18 | Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/ogvadPK) |
| 19 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/xbKyaxj) |
| 20 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/WbeaaNd) |
| 21 | Amanda | [Codepen](https://codepen.io/cym199922/pen/VYZEEja) |
| 22 | Rogan | [Codepen](https://codepen.io/RoganHsu/pen/JoPmwYB?editors=1011) |
| 23 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/XJrymmX) |
| 24 | Toung | [Codepen](https://codepen.io/Toung/pen/mybQpZe) |
| 25 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/YPKdWrr) |
| 26 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/gbYNOrY?editors=1011) |
| 27 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/Pwoomzp?editors=1010) |
| 28 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/yyLOdPP) |
| 29 | 郭庭妤 | [Codepen](https://codepen.io/flora_Kuo/pen/xbxENqZ?editors=1011) |
| 30 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/PwomLZj?editors=1011) |
| 31 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/yyLPMpG?editors=1010) |
| 31 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/Eaxemrp?editors=1011) |
| 32 | jinliu214  | [Codepen](https://codepen.io/jinliu214/pen/QwwYydz?editors=0010) |
| 33 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/jEPJXjr?editors=1011) |
| 34 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/EaPgLzw) |


---

- 快速複製格式：

```markdown!
| 0 | user | [Codepen]() |
```
