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

### 運用條件運算子做元件切換
在做元件切換時，我們可以利用條件（三元）運算子，舉例：

{
  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 元件以及條件運算子來完成以下畫面。
- [Loading 元件樣板](https://codepen.io/hexschool/pen/yLKoZNj)
- [API URL](https://dog.ceo/api/breeds/image/random)

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

<!-- 解答：

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