# 🏅Day23 - React 基礎練習 (8) - 隨堂測驗

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

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

題目一：請透過 JSX 的方式，將 products 中的兩筆資料，渲染到畫面上。

題目二：當點擊「調整價格」按鈕的時候，將 products 中第二筆的 price 價格調整為 750。

題目三：請利用 style 的方式，將產品名稱的字體顏色改為 color: red。

題目四：當點擊「更換名稱」按鈕的時候，將 products 中的所有 title 替換成 input 的值。

<!-- 解答：
const handlePriceChange = () => {
setProducts((prevProducts) => {
const newProducts = [...prevProducts];
newProducts[1] = { ...newProducts[1], price: 750 };
return newProducts;
});
};

const handleTitleChange = () => {
const newTitle = document.getElementById("text").value;
setProducts((prevProducts) =>
prevProducts.map((product) => ({ ...product, title: newTitle }))
);
};

return (
<div>
{products.map((product) => (
<div className="card mb-3" key={product.id}>
<img src={product.imageUrl} className="card-img-top primary-image" alt="主圖" />
<div className="card-body">
<h5 className="card-title" style={{ color: "red" }}>
{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>
))}
<button className="btn btn-primary mb-5" onClick={handlePriceChange}>
調整價格
</button>

<div className="d-flex">
<input type="text" className="w-25" id="text" />
<button className="btn btn-primary" onClick={handleTitleChange}>
更換名稱
</button>
</div>
</div>
);
-->

| ha | codepen |
| ----------- | ---------------------------------------------------------------------------- |
| Miikaa | [codepen](https://codepen.io/Miikaa/pen/ZYOOEeM) |
| Jin | [codepen](https://codepen.io/Jin-L/pen/azZBKQw) |
| Nooooora | [CodePen](https://codepen.io/Nora-Ch/pen/bNeBjLe) |
| Chia | [Codepen](https://codepen.io/Chia-the-encoder/pen/GgqNBMK) |
| 老屠 | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/XJKNBOB?editors=0010) |
| Marco | [Codepen](https://codepen.io/MarcoChiu/pen/MYebqKX) |
| Eric | [Codepen](https://codepen.io/wc-su/pen/wBWoEKd) |
| andy | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/xbORapK?editors=0010) |
| Tetsu | [Codepen](https://codepen.io/ttgchang/pen/XJKNPKo) |
| RUDY | [Codepen](https://codepen.io/Rudy-crw/pen/QwEGBYg?editors=0010) |
| 平平 | [Codepen](https://codepen.io/ypinpin/pen/vEKyVQa) |
| 地瓜 | [Codepen](https://codepen.io/ChippyYU/pen/ByzQPvz?editors=0011) |
| Eileen | c |
| cks40660 | [Codepen](https://codepen.io/CKS40660/pen/GgqNwja) |
| Jenna | [Codepen](https://codepen.io/abiscc14/pen/JoKbwEg) |
| Percy | [Codepen](https://codepen.io/Percy-Ku/pen/ZYOpwNK) |
| 小懿 | [Codepen](https://codepen.io/YT-the-vuer/pen/myEOvJq?editors=0011) |
| 7lun | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/raLWbBr?editors=0011) |
| cindy | [Codepen](https://codepen.io/a50134/pen/qENqwZz?editors=0011) |
| 7Red | [Codepen](https://codepen.io/cch2655/pen/yyJVwRz) |
| 社子畢卡索 | [Codepen](https://codepen.io/pen?template=jErVJKB) |
| 登登登 | [Codepen](https://codepen.io/Duncanin/pen/emzBojo?editors=0010) |
| FangFaang | [Codepen](https://codepen.io/Fang-the-selector/pen/pvbNBzp?editors=1010) |
| Leonard | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/ZYOBdKy?editors=0011) |
| wind | [Codepen](https://codepen.io/wind7y/pen/bNegGqd) |
| Melanie | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/azZBQrP) |
| kashiwatei | [Codepen](https://codepen.io/kashiwatei/pen/LEZxzJj?editors=1011) |
| Rogan | [Codepen](https://codepen.io/RoganHsu/pen/qENqQBo) |
| 星雪糖 | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/ByzpqoY) |
| 叮咚 | [Codepen](https://codepen.io/pinchieh-lin/pen/EayZdZj) |
| Wafa | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/bNegygj?editors=1010) |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/gbMLjgV?editors=1011) |
| JiaMori | [Codepen](https://codepen.io/jiamori/pen/jErwYpV) |
| 舜仁 | [Codepen](https://codepen.io/shunjen/pen/myEwYpP) |
| ZoeKang | [Codepen](https://codepen.io/byehywmx-the-animator/pen/JoKyKbY) |
| 小趴 | [Codepen](https://codepen.io/papa2415/pen/PwzKGLY) |
| TWLeoC | [Codepan](https://codepen.io/TWLeoC/pen/ZYOJmMg?editors=0110) |
| tanuki | [Codepan](https://codepen.io/tanuki320/pen/GgqOQmL?editors=0010) |
| Wen | [Codepen](https://codepen.io/hsiao-kevin/pen/JoKMJBq?editors=1112) |
| 伊迪 | [Codepen](https://codepen.io/sorryFish/pen/YPWaEMo) |