# 🏅Day 19 - React 基礎練習 (4) - JSX 與三元運算子

在 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 完成以下畫面：

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

<!-- 解答：

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

-->


| name        | codepen                                                                      |
| ----------- | ---------------------------------------------------------------------------- |
| Miikaa      | [codepen](https://codepen.io/Miikaa/pen/emzZWMV)                             |
| Zem         | [codepen](https://codepen.io/dgldwqlg-the-vuer/pen/GgqZVaP)                  |
| Tetsu       | [Codepen](https://codepen.io/ttgchang/pen/ByzzBzB)                           |
| Jin         | [Codepen](https://codepen.io/Jin-L/pen/EayyYNo)                              |
| Chia        | [Codepen](https://codepen.io/Chia-the-encoder/pen/ogLLvYP)                   |
| Nooooora    | [CodePen](https://codepen.io/Nora-Ch/pen/LEZZPQX?editors=1010)               |
| Eric        | [Codepen](https://codepen.io/wc-su/pen/GgqqKGK)                              |
| Owen He     | [Codepen](https://codepen.io/owen1120/pen/ogLLvdJ?editors=0010)              |
| Melanie     | [Codepen](https://codepen.io/pnrcspte-the-animator/pen/yyJJBZz)              |
| Marco       | [Codepen](https://codepen.io/MarcoChiu/pen/emzzYmK)                          |
| ZoeKang     | [Codepen](https://codepen.io/byehywmx-the-animator/pen/bNeeGva)              |
| cks40660    | [Codepen](https://codepen.io/CKS40660/pen/JoKKoPG)                           |
| Jenna       | [Codepen](https://codepen.io/abiscc14/pen/EayyaLN)                           |
| RUDY        | [Codepen](https://codepen.io/Rudy-crw/pen/ByzzyqM?editors=0010)              |
| 平平        | [Codepen](https://codepen.io/ypinpin/pen/vEKKOgb)                            |
| andy        | [Codepen](https://codepen.io/ewnblckz-the-styleful/pen/raLLOVr?editors=0010) |
| kuolun      | [Codepen](https://codepen.io/kuolun/pen/LEZZpbw)                             |
| 地瓜        | [Codepen](https://codepen.io/ChippyYU/pen/YPWWyOG)                           |
| 老屠        | [Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/JoKKGOE?editors=0010) |
| 小懿        | [Codepen](https://codepen.io/YT-the-vuer/pen/MYeeKdy?editors=1010)           |
| 星雪糖      | [Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/OPXXNzJ)              |
| FangFang    | [Codepen](https://codepen.io/Fang-the-selector/pen/RNRRRQG)                  |
| 登登登      | [Codepen](https://codepen.io/Duncanin/pen/dPXXXdY?editors=0010)              |
| Percy       | [Codepen](https://codepen.io/abiscc14/pen/EayyaLN)                           |
| kashiwatei  | [Codepen](https://codepen.io/kashiwatei/pen/bNeewgm?editors=1010)            |
| cindy       | [Codepen](https://codepen.io/a50134/pen/WbxxGXm?editors=0010)                |
| 7lun        | [Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/YPWWGRa?editors=0010)     |
| Eileen      | [Codepen](https://codepen.io/Eileen-io/pen/myEERby)                          |
| Leonard     | [Codepen](https://codepen.io/hyyfjqra-the-sans/pen/VYjjpvp?editors=0010)     |
| 7Red        | [Codepen](https://codepen.io/cch2655/pen/LEZZWbb)                            |
| wind        | [Codepen](https://codepen.io/wind7y/pen/WbxxjjQ)                             |
| JiaMori     | [Codepen](https://codepen.io/jiamori/pen/PwzzOyj)                            |
| jchunnn     | [Codepen](https://codepen.io/jchunnn/pen/zxBBpxO)                            |
| KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/azZZOOL?editors=1010)           |
| 社子畢卡索  | [Codepen](https://codepen.io/pen?template=wBWWmJJ)                           |
| 蛋白        | [Codepen](https://codepen.io/sjlu-0/pen/gbMMeRw)                             |
| Wafa        | [Codepen](https://codepen.io/dqricwgo-the-reactor/pen/bNeeXRj)               |
| 舜仁        | [Codepen](https://codepen.io/shunjen/pen/dPXpLaW)                            |
| Rogan       | [Codepen](https://codepen.io/RoganHsu/pen/dPXOKBK?editors=1010)              |
| tanuki      | [Codepen](https://codepen.io/tanuki320/pen/OPXgJYG?editors=0010)             |
| 小趴        | [Codepen](https://codepen.io/papa2415/pen/vEKJKeZ)                           |
| TWLeoC      | [Codepen](https://codepen.io/TWLeoC/pen/ByzdREZ?editors=1010)                |
| 伊迪        | [Codepen](https://codepen.io/sorryFish/pen/gbMxRje)                          |