今天！倒數第二天！
要來完成我立下的flag，用hook寫To Do List。
我超棒。

那麼，就來看看code吧！

function App() {
  const [todoValue, setTodoValue] = useState("");
  const [todoId, setTodoId] = useState(1);
  const [todoList, setTodoList] = useState([]);

  const handleTextChange = event => {
    setTodoValue(event.target.value);
  };

  const handleAddItem = () => {
    setTodoId(todoId+1)
    let newItem = {
      id :todoId,
      value :todoValue
    }
    setTodoList(prevTodoValue =>
      prevTodoValue.concat(newItem)
    );
    setTodoValue("");
  };

  const handleDeleteItem  =  (key) => {
    console.log('test')
    console.log(todoList[key].id)
    let itemId=todoList[key].id
    let updatedItems = todoList.filter(item => {
      return item.id !== itemId;
    });
    console.log(updatedItems)
    setTodoList(
      [].concat(updatedItems)
    );
    setTodoId(todoId-1)
  };

  return (
    <div>
      <h3>TO DO LIST</h3>
      <input type="text" value={todoValue} onChange={handleTextChange} />
      <button onClick={handleAddItem} disabled={!todoValue}>{"Add to-do #" + (todoList.length + 1)}</button>

      {todoList.map(
        (item,key) => (
            <div key={item.id} value={item}>
              <input
                type="checkbox"
              />
              {item.value}
              <button type="button" onClick={() => handleDeleteItem(key)}>x</button>
            </div>
          )
      )}
    </div>
  );
}

首先，我們先用useState建立幾個會用到的變數。

1. 抓取input值
2. ID
3. 整個todolist

  const [todoValue, setTodoValue] = useState("");
  const [todoId, setTodoId] = useState(1);
  const [todoList, setTodoList] = useState([]);

接著，一樣建立我們會用到的function，第一個是抓取input的值，並放入todoValue裡面。

  const handleTextChange = event => {
    setTodoValue(event.target.value);
  };

再來是添加item，基本上跟昨天長得一模一樣，只是因為有useState，所以改變變數都很簡單。

  const handleAddItem = () => {
    setTodoId(todoId+1)
    let newItem = {
      id :todoId,
      value :todoValue
    }
    setTodoList(prevTodoValue =>
      prevTodoValue.concat(newItem)
    );
    setTodoValue("");
  };

也是跟昨天一樣，一個刪除item的功能

  const handleDeleteItem  =  (key) => {
    let itemId=todoList[key].id
    let updatedItems = todoList.filter(item => {
      return item.id !== itemId;
    });
    setTodoList(
      [].concat(updatedItems)
    );
    setTodoId(todoId-1)
  };

最後就是把他們渲染到頁面上拉。

  return (
    <div>
      <h3>TO DO LIST</h3>
      <input type="text" value={todoValue} onChange={handleTextChange} />
      <button onClick={handleAddItem} disabled={!todoValue}>{"Add to-do #" + (todoList.length + 1)}</button>

      {todoList.map(
        (item,key) => (
            <div key={item.id} value={item}>
              <input
                type="checkbox"
              />
              {item.value}
              <button type="button" onClick={() => handleDeleteItem(key)}>x</button>
            </div>
          )
      )}
    </div>
  );

不得不說，用hook真的快很多，而且也不用整天在那邊this來this去。
之後如果真的需要用react開發，我應該也會選擇寫hook。

必須說，如果是從class component開始一步一步學的話，對增進js能力本身是有很大的幫助的。
又或者說，完全暴露了自己js有多爛的事實。

但，總之，我還是把兩種todolist的寫出來了！當然，是站在巨人們的肩膀上！！

（圖片來源：https://forum.gamer.com.tw/G2.php?bsn=43473&sn=332）