---
# System prepended metadata

title: "\U0001F3C5 Day 8｜整合練習 - 呼叫 API、Loading 元件切換"
tags: [2022 React 新手讀書會]

---

---
tags: 2022 React 新手讀書會
---
# 🏅 Day 8｜整合練習 - 呼叫 API、Loading 元件切換
在前幾天的練習我們已經學到 
、useEffect、呼叫 API 以及元件建立的部分，因此今日的練習是要整合以往的學習，開發出常見的 API 呼叫 Loading 效果，並在資料取得回來後顯示到畫面上。

### 運用條件運算子做元件切換
在做元件切換時，我們可以利用條件（三元）運算子，舉例：
```jsx=
{
  loading? <Loading /> : <ImageArea />
}
```
當 loading 為 true 時，就會顯示 Loading 元件，false 則為 ImageArea 元件。

[文件參考](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)

## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/bGvWwwR)，使用 useState, useEffect, 建立 loading 元件以及條件運算子來完成以下畫面。
![](https://i.imgur.com/ngB4mNu.gif)
- [Loading 元件樣板](https://codepen.io/hexschool/pen/yLKoZNj)
- [API URL](https://dog.ceo/api/breeds/image/random)


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

<!-- 解答： 
```
function Loading() {
  return <div className="loader"></div>
}
function Example() {
  const [data, setData] = React.useState({});
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    async function fetchMyAPI() {
      setLoading(true);
      let response = await fetch('https://dog.ceo/api/breeds/image/random');
      response = await response.json()
      setData(response)
      setLoading(false);
    }

    fetchMyAPI()
  }, [])

  return <div>
    {
      loading? <Loading /> : data.message && <img src={data.message} />
    }
  </div>
}
```
-->


回報區
---


|         Discord         |                              CodePen / 答案                              |
|:-----------------------:|:------------------------------------------------------------------------:|
|        Rice#8043        |     [CodePen](https://codepen.io/riecball/pen/OJvxjRe?editors=1011)      |
|        niel#2413        |           [Codepen](https://codepen.io/danielhsu/pen/qBoymEd)            |
|       yunyun#5215       |           [Codepen](https://codepen.io/yun_yunni/pen/oNqMWqZ)            |
|       CofCat#9226       |     [Codepen](https://codepen.io/cofcat456/pen/qBoymYq?editors=1010)     |
|       布魯諾#7239       |     [Codepen](https://codepen.io/bruno-yu/pen/LYdByrx?editors=1010)      |
|        魚魚#0937        |            [Codepen](https://codepen.io/fish0522/pen/LYdByaL)            |
|     DIANAxAKKO#4298     |     [Codepen](https://codepen.io/redfire29/pen/eYMjWop?editors=1010)     |
|    真．穎旻粉撕#4995    |            [Codepen](https://codepen.io/gbnbihif/pen/MWVBmPg)            |
|       Tsuei#9284        |     [CodePen](https://codepen.io/AlbertoLL/pen/GRxBmPd?editors=1010)     |
|       YuZhun#1362       |      [CodePen](https://codepen.io/danzhun/pen/MWVBoYa?editors=0110)      |
|     Dylan_Lin#7320      |     [Codepen](https://codepen.io/lin-dylan/pen/XWEBRBm?editors=1111)     |
|        葉秋#2335        |            [Codepen](https://codepen.io/as880074/pen/vYRamje)            |
|      Vita Ora#4585      |    [Codepen](https://codepen.io/showlovezz/pen/rNdrwzy?editors=0010)     |
|      MarsKuo#6015       |            [Codepen](https://codepen.io/MarsKuo/pen/BarPZYX)             |
|      Eric Su#7798       |             [Codepen](https://codepen.io/wc-su/pen/RwMBrya)              |
|        L0F0#8733        |       [Codepen](https://codepen.io/l0f0/pen/abYjwWy?editors=0110)        |
|         YJ#1839         |            [Codepen](https://codepen.io/cshjufxc/pen/bGvjRdJ)            |
|       IceSam#7836       |            [Codepen](https://codepen.io/sam-hsu/pen/VwXBWzB)             |
|        SHIN#6075        |            [Codepen](https://codepen.io/shin9626/pen/zYWLzKZ)            |
|       Kenge#3690        |             [Codepen](https://codepen.io/pgkusn/pen/NWYBgEG)             |
|       棒腿 #9350        |     [Codepen](https://codepen.io/frankHsu/pen/mdxjwWQ?editors=0010)      |
|         C #4593         |            [Codepen](https://codepen.io/ShaniMa/pen/wvmxewN)             |
|       黃士桓#7654       |         [codePen](https://codepen.io/shr-huan-huang/pen/OJvwgeP)         |
|     hiYifang #0736      |            [Codepen](https://codepen.io/hiYifang/pen/KKoBqRM)            |
|        威爾#1694        |            [CodePen](https://codepen.io/WILL_Wu/pen/LYdBLem)             |
|   Carolkiki2003#7399    |            [CodePen](https://codepen.io/wasfzuig/pen/mdxjMeb)            |
|       Mitour#0672       |      [CodePen](https://codepen.io/mitour/pen/LYdBjNq?editors=0011)       |
|        Ayre#0016        |    [CodePen](https://codepen.io/yichunlin09/pen/VwXBWVq?editors=0010)    |
|           Ada           |     [CodePen](https://codepen.io/zggsoagv-the-scripter/pen/dymjzKy)      |
|           aki           |             [codepen](https://codepen.io/aki168/pen/KKoBvbR)             |
|       huch09#1426       | [Codepen](https://codepen.io/subarashii-huch09/pen/bGvjWJz?editors=1111) |
|       Yanyan#3555       |           [Codepen](https://codepen.io/wei-yi-lee/pen/ExEpwKY)           |
|       露易莎#7673       |           [Codepen](https://codepen.io/louisa-lin/pen/gOejRNY)           |
|        無名#6427        |      [Codepen](https://codepen.io/Nomoney/pen/XWEBeqb?editors=1010)      |
|       Yiling#4054       |      [Codepen](https://codepen.io/lin010/pen/MWVBEEd?editors=1111)       |
|       AllenW#1132       |             [Codepen](https://codepen.io/AllenW/pen/abYjwEV)             |
|        彼得#1923        |            [Codepen](https://codepen.io/shiou-ho/pen/MWVBEqg)            |
|       Doris#1140        |           [Codepen](https://codepen.io/doris79588/pen/GRxBMbG)           |
|        Shau#6400        |           [Codepen](https://codepen.io/shau-chen/pen/WNzKXwV)            |
| React-慧茹(拉拉醬)#3414 |         [Codepen](https://codepen.io/lala-lee-jobs/pen/RwMBjVe)          |
|        yuyu#6310        |     [Codepen](https://codepen.io/yuyu0905/pen/bGvjYBP?editors=1111)      |
|        zzly#9134        |           [Codepen](https://codepen.io/ly00/pen/yLKqPeN)            |
|        Mr.Sean#3825        |           [Codepen](https://codepen.io/sean_1215/pen/OJvwjgX?editors=1111)            |
| Kimi#2092 |[Codepen](https://codepen.io/a3216lucy/pen/MWVBOBJ) |
| Vada Chen#2055 |[CodePen](https://codepen.io/vadachen/pen/PoRBKRG?editors=0010) |
| Timothy#5863 |[CodePen](https://codepen.io/timothy_hippo/pen/rNdrpvq?editors=0011) |
|moitw|[codepen](https://codepen.io/tsuifei/pen/ZExjvYa?editors=0111)|
| NinaKuo#3332 |[Codepen](https://codepen.io/ninakuo0814/pen/ZExjamK)|
| JasonLu |[Codepen](https://codepen.io/wnptocip/pen/oNqMper)|
| rainbow#3329 |[Codepen](https://codepen.io/g901612002/pen/YzajYxK)|
| wiimax#4564 | [Codepen](https://codepen.io/willismax/pen/vYRapeE)|
| JarDar#6980 |[codepen](https://codepen.io/jardarpen/pen/bGvjLVL)|
| 喬喬#2824 |[codepen](https://codepen.io/joanne-wei/pen/abYjErg?editors=1011)|
| Chelly#6129 |[codepen](https://codepen.io/chellyhsu/pen/xxWJYgG)|
| JessSong#5050 |[codepen](https://codepen.io/jssanji03/pen/vYRadyx)|
| andersonshen#4675 |[codepen](https://codepen.io/luxyenni-the-bold/pen/VwXBQJr)|
|ck ck |[codepan](https://codepen.io/wei-nie/pen/PoRBQRR?editors=0010)|
|LEO#7779 |[codepan](https://codepen.io/nekorice/pen/Yzajawa)|
|Midnightdinner#6220|[Codepen](https://codepen.io/woowooyong/pen/MWVBQMY)|
|IreneLee#7932|[Codepen](https://codepen.io/ntjtcxpt-the-animator/pen/vYRajYw?editors=0010)|
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/GRxBGjE) |
| Claire#2116 | [Codepen](https://codepen.io/claire-chang-the-bashful/pen/dymjeQP) |
|lingxuan|[Codepen](https://codepen.io/lingxuan0618/pen/wvmxXPX?editors=0110)|
|easton#3863 | [Codepen](https://codepen.io/EastonIsCodingNow/pen/oNqMywz) |
|Stanley#2505|[Codepen](https://codepen.io/bigbearada/pen/mdxjzdO)|
|TedWang|[Codepen](https://codepen.io/wangtaiyan/pen/OJvwExQ?editors=0011)|
|JimHwang#3594|[Codepen](https://codepen.io/jimh1129/pen/abYjRQN?editors=1111)|
|紅豆豆#0518|[Codepen](https://codepen.io/zoseqlpc/pen/OJvwBwZ?editors=0010)|
|山貓(焜)#7041|[Codepen](https://codepen.io/pen?template=jOzpYdz)|
| Mao#5230 |[Codepen](https://codepen.io/taomaomao/pen/GRxBYdy?editors=0010)|
| Ryder#7398 |[Codepen](https://codepen.io/rider159159/pen/ZExjmbb?editors=1010)|
| Anson#3594 |[Codepen](https://codepen.io/huanmingchang/pen/KKoBRJo)|
| Nico#8739 |[Codepen](https://codepen.io/Nicof2e/pen/mdxjZQo)|
| charlottelee849#0366 |[Codepen](https://codepen.io/charlotte-lee/pen/ZExjgOa)|
| 翔#0859 |[Codepen](https://codepen.io/energy95272z/pen/jOzpgva)|
|HedgehogKU|[CodePen](https://codepen.io/hedgehogkucc/pen/xxWJPxq?editors=1010)|
|ChloeLo#4858|[CodePen](https://codepen.io/chloelo/pen/yLKxBJR)|
|Wu#0167|[CodePen](https://codepen.io/Xander0705/pen/NWYLKeE?editors=1111)|
|吉利#3810|[codepen](https://codepen.io/gillianyy/pen/VwXGZzm)|
| hw#0715 | [Codepen](https://codepen.io/Lhwei/pen/VwXGYLg) |
|Neal#0665|[codepan](https://codepen.io/neallkf/pen/gOejBOm?editors=0011)|
| whatsupmm#6761 | [Codepen](https://codepen.io/meidada/pen/eYMLNzx?editors=1111) |
| KuoMin#4931| [Codepen](https://codepen.io/KuoMin/pen/VwXBXLQ) |
| 城堡#2126 | [Codepen](https://codepen.io/tthcastle/pen/qBoMZXO) |
| 薯餅#3581 | [Codepen](https://codepen.io/ColdingPoTaTo/pen/qBoyYzB) |
| Wins#8457 | [Codepen](https://codepen.io/winszhuang/pen/QWmVdQW?editors=1111) |
| Joechiboo#3960 | [Codepen](https://codepen.io/joe-chiboo/pen/poLOdqy) |
| LinaChen#1796 | [Codepen](https://codepen.io/LinaChen/pen/MWVBNyv) |
| Bumble幫啵#0255 | [Codepen](https://codepen.io/lmpzezvw-the-lessful/pen/ZExMvGK) |
| EvaLin#4546 | [Codepen](https://codepen.io/evalin0316/pen/RwMYxrO?editors=1111) | 
| wenyun#2362 | [Codepen](https://codepen.io/wenyuncc/pen/dymqdoP) | 
| Robert Lo#9653 | [Codepen](https://codepen.io/Robert-Lo/pen/XWEPJNE) |
| RON#2813 |[CodePen](https://codepen.io/Ron115/pen/BarPrNM)|
| ZengZeng |[CodePen](https://codepen.io/tyzyoko/pen/wvmxmaO)|
| JimmyChang#5558 |[CodePen](https://codepen.io/JimmyChangWenChi/pen/OJvoEBQ?editors=1010)|
| Yihan#5560 |[CodePen](https://codepen.io/h513hh513h/pen/WNzgajM?editors=0111)|
| GL#2256 |[CodePen](https://codepen.io/4genie/pen/ZExMmMO)|
| yoshidc#0455 |[CodePen](https://codepen.io/yoshiyyc/pen/JjLaaVz)|
|灰塵貓#7994|[Codepen](https://codepen.io/rjk66268/pen/rNdZbVw?editors=0011)|
| shin#5792 |[CodePen](https://codepen.io/hah1030/pen/wvmYBaw?editors=0010)|
| lloydd#8224 | [CodePen](https://codepen.io/thanatus25/pen/OJvBPRL) |
| Otis#8455 | [CodePen](https://codepen.io/humming74/pen/bGvmVaZ?editors=1111) |
|許揚民 Evan#4546|[Codepen](https://codepen.io/gitevanhsu/pen/KKoGKJp)|
|ねこ*#9385|[Codepan](https://codepen.io/kunpao0104/pen/abYRddE)|
|Evonne#7078|[CodePen](https://codepen.io/Hsu1Fang/pen/VwXEeGO?editors=0011)|
|Rikku#1756|[CodePen](https://codepen.io/rikkubook/pen/LYdgNVK?editors=1111)|
|Rocker#6235|[CodePen](https://codepen.io/RockerLi/pen/PoRyNmp)|
|kyle890721#1016|[CodePen](https://codepen.io/KYLE890721/pen/QWmZKRv)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/WNzajjX)|
|雪莉#4827|[Codepen](https://codepen.io/utshang216/pen/dymgvea)|
|emma#3398|[Codepen](https://codepen.io/itsems/pen/MWVPody?editors=0011)|
|JC#8658|[Codepen](https://codepen.io/jcsamoyed/pen/JjLmyKp?editors)|
|Kelvin#3296|[Codepen](https://codepen.io/kelvinchang/pen/zYWmEQO)|
|𝓛𝓊𝒸𝓎#8635|[Codepen](https://codepen.io/lucygirl/pen/rNdqJOr)|
|座標33129#8748|[Codepen](https://codepen.io/ad80352/pen/rNdqrxB?editors=0010)|
|蘇蘇#0426|[Codepen](https://codepen.io/sabine1123/pen/vYRVvKV)|
| Overy#4545 |[Codepen](https://codepen.io/oceanwhale52hz/pen/ZExmWZV) |
|Mori#5582|[Codepen](https://codepen.io/flower9312/pen/MWVzQqB)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/MWVzNZJ)|
|minmin#8960|[codepen](https://codepen.io/minfan-chen/pen/xxWmxdb)
|時雨#8837|[codepen](https://codepen.io/jjustin-35/pen/rNdoxmM?editors=0010)
|anby#7112|[codepen](https://codepen.io/andy-ch-bo-an/pen/XWEOVNb)
|陳sam#9117|[Codepen](https://codepen.io/euldpliv/pen/ZExwPvM)
|Rose#1669|[Codepen](https://codepen.io/Rose-Wu/pen/GRxeRKg)
|eching#9183|[Codepen](https://codepen.io/echin/pen/bGvZgxr?editors=1010)
|Li-Ninja#0471|[Codepen](https://codepen.io/li-ninja/pen/bGvJMvv)
|larahuang#8309|[Codepen](https://codepen.io/lara1105huang/pen/PoRgaKx)
|Eileen#6454|[Codepen](https://codepen.io/Eileen-io/pen/zYWbVpJ)
|鉛筆#7763|[Codepen](https://codepen.io/zoeguava/pen/jOzoygL)
|Kyle Lin#0561|[Codepen](https://codepen.io/thenkyle/pen/poLMrGa)
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/RwybVBK?editors=1010)
|ninipopo#7983  |[CodePen](https://codepen.io/Robinnini/pen/jOxWMMK?editors=0111)|
|Stacy#7983  |[CodePen](https://codepen.io/Robinnini/pen/xxjEpJm)|
|SleepWalk#1635  |[CodePen](https://codepen.io/arthurliinn/pen/ZERpZoN?editors=0010)|
|Eshiunm|[CodePen](https://codepen.io/Code-My/pen/jORvmjZ)|




