在 React 中，三元運算子是一個常用的條件判斷工具，特別適合在 JSX 內進行條件渲染。因為 JSX 是 JavaScript 語法的擴展，三元運算子可以用來根據條件顯示不同的內容。

例如：

const isAuth = true;
const element = (
  <div>
    {isAuth ? <h1>歡迎回來！</h1> : <h1>請先登入</h1>}
  </div>
);

也可以使用三元運算子將上面的程式碼改寫成以下：

const isAuth = true;
let text = "";

isAuth ? (text = "歡迎回來！") : (text = "請先登入");

const element = (
  <div>
    <h1>{text}</h1>
  </div>
);

使用三元運算子可在 React 中判斷 jsx 或是 component 什麼時候該出現，現在點擊 isVisible 的按鈕，會將 isVisible 更改為 true，當 isVisible 為 true 時，就會顯示「歡迎使用 React!」的文字。

function App() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div className="App">
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? "隱藏訊息" : "顯示訊息"}
      </button>
      {isVisible && <p>歡迎使用 React!</p>}
    </div>
  );
}

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/WNVJyJL?editors=1010)，並撰寫 JSX 完成以下畫面：

備註：
- 請利用三元運算子的方式，利用點擊按鈕時來切換文字

## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

// 練習區塊
  return (
    <div className="App">
      <h1>{isLoggedIn ? "歡迎回來！" : "請先登入"}</h1>
      <button className="btn btn-primary" onClick={() => setIsLoggedIn(!isLoggedIn)}>
        {isLoggedIn ? "登出" : "登入"}
      </button>
    </div>
  );
}
//區塊結束

-->

回報區
---

| #   | Discord | CodePen / 答案 |
| --- | ----- | ----- |
| 1 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/qEWpPWL?editors=1011)|
| 2 | MY | [Codepen](https://codepen.io/ahmomoz/pen/RNbZgBm?editors=1010) |
| 3 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/MYgQoyZ) |
| 4 | Toung | [Codepen](https://codepen.io/Toung/pen/qEWxjRO) |
| 5 | han | [Codepen](https://codepen.io/iamHanCheng/pen/mybXwRm?editors=1010) |
| 6 | Satar | [Codepen](https://codepen.io/SatarKuo/pen/gbYvRWG?editors=0010) |
| 7 | GAVI | [CodePen](https://codepen.io/qbafldcv-the-scripter/pen/mybXwrW?editors=0010)|
| 8 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/pvzawaY) |
| 9 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/wBwyeXx) |
| 10 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/mybXwzp?editors=1010) |
| 11| 邵 |[CodePen](https://codepen.io/ukscrlno-the-typescripter/pen/mybXwvX?editors=1010)|
| 12 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/GgKQEzx) |
| 13 | Nocab | [Codepen](https://codepen.io/PeihanWang/pen/vEBdZwp?editors=0010) |
| 14 | Noy(Toad) |[Codepen](https://codepen.io/MochiCodingPen/pen/bNbLRBv?editors=1010) |
| 15 | Yen | [Codepen](https://codepen.io/yuxxxlouyen/pen/JoPpyap) |
| 16 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/mybXMNY?editors=0010) |
| 17 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/vEBdeML) |
| 18 | Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/VYZQymQ) |
| 19 | Amanda | [Codepen](https://codepen.io/cym199922/pen/RNbQyay) |
|20|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/ByBYVRK?editors=1010)|
| 21 | Clove_墨 | [Codepen](https://codesandbox.io/p/sandbox/5rmwhw) |
| 22 | 爆漿 | [Codepen](https://codepen.io/nvdwwlbx-the-vuer/pen/RNbMVqw?editors=1011) |
| 23 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/ZYzxyGj) |
| 24 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/YPKavRm) |
| 25 | Rogan | [Codepen](https://codepen.io/SatarKuo/pen/gbYvRWG?editors=0010) |
| 26 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/bNbMYYR) |
| 27 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/yyBjjVr?editors=1011) |
| 28 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/XJrqLrE?editors=1010) |
| 29 | Rochel |[Codepen](https://codepen.io/rochelwang1205/pen/QwLxeOB?editors=1010)|
| 30 | Fabio20 | [Codepen](https://codepen.io/fabio7621/pen/emOLGPp?editors=0010) |
| 31 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/PwYyomL?editors=0010)|
| 32 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/PwYrWNY?editors=1010)|
| 33 | yun-lin | [Codepen](https://codepen.io/yunlinhsu/pen/VYwYqNR?editors=1010) |
| 34 |jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/wBvaeqj?editors=0011) |
| 35 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/azbNrGy?editors=1010) |
| 36 | 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/YPzGZWP?editors=1111) |
| 37 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/OPJRdPO?editors=1011) |
| 38 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/jEOpMRW?editors=1010) |
| 39 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/NPWopvj?editors=1010) |
| 40 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/VYeeaZv) |
<br>

- 快速複製格式：

| 0 | user | [Codepen]() |