昨天我們已經把新增的功能做好了，那根據使用情境來說，總是會有不小心手滑點錯的時候吧?
所以我們今天要做的事情就是幫已完成列表加上還原的按鈕。
我們先看到HomeListPage這個 component

<div className="flex gap-[20px]">
{renderAdd && (
    <TodoBtn
    renderChildren={renderAdd}
    handleClick={(e) => {
        sendItemID(e, index);
    }}
    className={"bg-green-700"}
    />
)}
<TodoBtn
    renderChildren={renderDelete}
    handleClick={(e) => handleDeleteBtnClick(e, index)}
    className={"bg-red-700"}
/>
</div>

可以看到我們現在這裡面只放了 2 個 button，所以我們就先複製一顆按鍵，並且一樣使用 render props 的方式將 icon 決定權拋給父層

const sendRecoverItemID = (e, item) => {
    e.preventDefault();
    e.stopPropagation();
    handleRecover(item);
};

然後回到父層，我們只要使用這個參數，就可以將圖片丟進子層，並且可以透過 callback 獲得目標的位置。

renderRecover={() => <ResetIcon className="w-6 h-6" />}
handleRecover={handleRecoverClick}

並且邏輯和新增 todo 有 87%相似，大致上就是反過來而已

const handleRecoverClick = ItemId => {
    const newDoneArr = doneTodo.map(e => e);
    const recoverItem = newDoneArr.splice(ItemId, 1);
    setDoneTodo(newDoneArr);

    const newTodoArr = todoList.map(e => e);
    newTodoArr.push(recoverItem[0]);
    setTodoList(newTodoArr);
};

首先我們先複製一份新的已完成清單，接下來透過splice這個Method指定位置的資料從剛剛複製好的array中抽出來，這邊有一點需要注意splicereturn的元素會是一個array，這也是為什麼我們再將它加入array的時候是用recoverItem[0]而不是recoverItem，因為splice接收的2個參數分別是(起始位置,移除幾個元素)，會有複數資料的狀況，所以return會是一個array。

目前到這邊我們的Todo已經有個大致上的雛型了，回到一開始說的基本功能。
使用者可以進行CRUD的操作
C - 使用者可以建立todo
R - 使用者可以查詢指定todo
U - 使用者可以更新todo
D - 使用者可以刪除指定todo
我們目前可以確定的是，使用者可以建立todo & 移除todo，但是還不能查詢指定todo & 更新指定todo。