---
# System prepended metadata

title: "\U0001F3C5Day23 - React 基礎練習 (8) - 隨堂測驗"
tags: [React 直播班 - 2025 冬季班]

---

 # 🏅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)                          | 