React & Redux

【今日&昨日進度】

死磕硬磕花了兩天把 todolist 的 filter 功能做完了，送自己這個表情＝＝|||

【學習心得】

昨天開始寫作業的時候雖然本來是用 Bootstrap ，但是發現好像有點麻煩所以最後選擇用 Material-ui，官方文件寫得滿清楚的，也可以兼容 styled component 的方式，其中要注意一下 css render 的順序，還有為了改主題顏色研究了一陣子，算是半套用成功(?)
結果實際效用就是 todolist 也只用到 Input 跟 Button 元件，但是花了我很多時間研究ＸＤ 給自己的鼓勵是，未來如果工作上用到應該會比較快上手～

filter 全部、已完成跟未完成的功能我真的做超久，從昨天晚上一直寫到睡前，再從今天早上 8 點多一直死磕硬磕的寫到下午 4 點多才終於做出來，期間找了超多 todolist 的教學（但大部分都沒有教這個不然就是都用 react router 做出來），看了幾個同學的作業但都還是沒辦法順利 render 我要的東西

有確認
1.知道用 filter 去判斷 todo.isDone 的狀態
2.按下按鈕之後要顯示需要的內容
3. todos.map 那邊要 filter 我要的內容

猜測可能要用 filter() 或是 map() 的方法去判斷
有想過用 "all", "done" ,"undone" 去做判斷，但是這樣 todos 的資料又要再加入一筆，明明已經有 isDone 應該要從這邊去做判斷

覺得會卡住應該是對 props 傳遞上還不是很理解，所以我就把整個 todolist 邏輯都砍掉只離下 UI 全部重做一遍，最後剩下卡在 filter

後來看到有個同學用 todos.filter().map() 這樣的方式去判斷，突然想到對啊可以用兩個內建函式去對資料做處理，但還是卡在按鈕按下去回傳的狀態（回傳的是 filter 後的 array）之後又想想啊不對應該是要讓判斷的按鈕回傳 true 或是 false 比對 todos.filter() 的狀態，所以只要設定好 todoFilter 的值為 null 、true、false 就可以得到想要的資料了。

// 初始資料
const [todoFilter, setTodoFilter] = useState(null);

// 按鈕按下去
const handleTodoFilter = (isDone) => {
  setTodoFilter(isDone);
};
return(
todos.filter((todo) => todo.isDone !== todoFilter).map((todo) => ( //render的東西))
)

透過重新做一次 todolist 邏輯上感覺有更清楚了，一直寫不出來也真的很焦慮，內心也會突然冒出「靠杯這個這麼簡單我怎麼寫不出來，靠邀寫了一整天了耶耶耶」各種否定的想法，但是寫出來的那一刻就覺得「我怎麼可以這麼棒哈哈哈」超級有成就感，我想這就是寫程式的快樂吧～

然後晚上才開始看 class component 後半部的課程影片，發現影片裡面老師已經有講過類似的方法了，我還研究這麼久真的很瞎ＸＤ

今天～我就是一隻蝦，蝦蝦蝦～