画面完成後，该怎麽从List.js的回圈元件中的按钮去互叫function，
让function去改变App.js中的State资料呢?

删除事项和完成事项功能

我们需要在App.js档案中建立删除事项和完成事项的function，再利用props将两个function传List元件中，List便可以使用function来改变App.js中的资料了。

删除项目function

//App.js 

/*删除项目function*/
//点击删除按钮後会回传点击项目的key到index参数中
  const deleteItem = function (index) {
//筛选留下key和index不同的项目，变相就是删除选中项目
    const list = todoList.filter((item) => item['key'] !== index)
//将项目变更後的List存回TodoList
    setTodoList(list)
  }

完成项目function

//App.js  

/*完成项目function*/

	//点击完成按钮後会回传点击项目的key到index参数中
  const doneItem = function (index) {
	
  //用maa查询每个阵列项目，如果key和index相同，将done的值变true
    const list = todoList.map(function (item) { 
		if (item['key'] === index) item['done'] = true; 
		return item 
		})
	//将项目变更後的List存回TodoList
    setTodoList(list)
  }

用物件形式把两个function包起来，通过props传到List.js给

//App.js 

return (
    <div className="App">
      <Header />
      <div className="container">
        <Input />
        <div className="list-wrapper">
					//透过props.fuc传入function
          <List show={todoList} fuc={{ deleteItem, doneItem }} />
        </div>
      </div>
    </div>
  )

在List.js的itemloop之中就能使用function改变资料了

//List.js

const itemLoop = function (list) {
        const deleteItem = prop.fuc.deleteItem
        const doneItem = prop.fuc.doneItem

        return list.map((item) => {
            return (<div key={item.key}>
                <div className="flex item-wrap">
                    <p>{item.content}</p>
                    <div className="flex center gap-10">
			//元件dom不能绑JavaScript event，所以在外层用div包住Button使用
			//记得传入事项的key到参数中
                      <div onClick={() => deleteItem(item.key)}>
						<Button content="删除" type="detele" />
                      </div>
                        <div style={btnDisplay} 
                            onClick={() => doneItem(item.key)}>
                            <Button content="完成" />
						</div>
                    </div>

                </div>
                <hr />
            </div>)
        })
    }

待办和完成分页

最後一个步骤，我要将事项用done的boolean值来分成
已完成的事项list、未完成的事项list
用useLocation()的pathname判断路由，来传入不一样的list

//App.js
import { useLocation } from 'react-router-dom';

//  待办和未完成分别的list
  function doneList(list) {
    return list.filter((item => {
      return item.done && !item.delete
    }))
  }

  function undoList(list) {
    return list.filter((item) => {
      return !item.done && !item.delete
    })
  }

//根据路由传入不同资料给List.js
const location = useLocation()
const changeFun = location.pathname === '/undo' ? undoList(todoList) : doneList(todoList)

return (
    <div className="App">
      <Header />
      <div className="container">
        <Input />
        <div className="list-wrapper">
					//传入不同资料到List元件中
          <List show={changeFun} fuc={{ deleteItem, doneItem }} />
        </div>
      </div>
    </div>
  )

这样就能切换待办和完成事项页面了！
测试的预设State可以移除改为空阵列[]，让一进画面时没有资料显示。

全部的程序码放在以下网址的github上，可以拿去参考
https://github.com/Cheng-sih-rong/todolist-react

实际页面
https://cheng-sih-rong.github.io/todolist-react/index

完赛心得

祝我们组顺利的完成挑战！要是没有亲爱的组员们在群组里更新进度，我恐怕第五天就放弃了吧QQ。
这漫长的30天，也就这样熬过去了，虽然笔记有很多不足的地方，但透过这三十天，
不仅是认真学习了一个新的框架React，相信自己做笔记的速度和能力也有进步，收获非常多，很庆幸有参加铁人赛！
这一个月每天下班後都在家水深火热的赶文章（没有库存自作孽），
结束後总算松口气了～接下来几天要放空让大脑休息一下，yeah!!!

感谢我的组员们一起同甘共苦撑过去，你们最棒了！之後还要一起学习更多程序喔！

下面分享组员们的超棒文章，大家辛苦啦！

我的Vue学习笔记
https://ithelp.ithome.com.tw/users/20140300/ironman/4132

这个网站也太嗨！30 个网页动态提案
https://ithelp.ithome.com.tw/users/20140247/ironman/4150