react怎麼改變陣列中的某個元素

  this.state = {
       ToDoList:[
         {
           id:1,
           title:'吃飯',
           completed:true
         },
         {
          id:2,
          title:'睡覺',
          completed:false
        },
        {
          id:3,
          title:'學習',
          completed:true
        }
       ]
    }

    <ToDoList
       ToDoList={this.state.ToDoList} 
       changeTitle={this.changeCompleted}
   listDelete={this.listDelete}
       >
       </ToDoList>

import React, { Component } from 'react'
import './ToDoList.css'
export default class ToDoList extends Component {
    render() {
        return (
            <div className='ToDoList'>
                <ul>
                    {
                        this.props.ToDoList.map((item)=>{
                        return <li key={item.id}>
                            {item.title}
                            <p>{item.completed?'已完成':'未完成'}</p>
                            <div>
                            //根據id改變父元件中ToDoList陣列的陣列元素的Completed的值
                            <button className='btn1' id={item.id} onClick={this.changeCompleted}>切換狀態</button>
                            //根據id刪除父元件中ToDoList陣列的陣列元素
                            <button className='btn2' id={item.id} onClick={this.listDelete}>刪除</button>
                            </div>
                          </li>
                        })
                    }
                </ul>
              
            </div>
        )
    }
    listDelete=(e)=>{
        this.props.listDelete(e.target.id)
    }
    changeCompleted=(e)=>{
        this.props.changeCompleted(e.target.id)
    }
}

  changeCompleted=(id1)=>{
    // 傳過來的id不是數位型別，這裡進行強制轉換，不然下面的if語句無法判斷
    const id2=Number(id1)
    //map遍歷的陣列元素是物件的話，會修改原陣列的值，也就是會修改this.state的值，這之前建議深拷貝原陣列再操作，個人淺見。
    //最簡單的深拷貝(JSON.stringify() 和JSON.parse())
    //先把物件使用JSON.stringify()轉為字串，再賦值給另外一個變數，然後使用JSON.parse()轉回來即可。
    //深拷貝
    const ToDoList1 = JSON.parse( JSON.stringify([...this.state.ToDoList]))
    this.setState({
      //將拷貝的陣列展開每一項，對每一項的id和傳過來的id2進行對比，如果和傳過來的id相同，說明
      //找到了需要修改的哪一項，然後將那一項的completed取反即可。
      ToDoList:ToDoList1.map((item)=>{
        if(item.id===id2){
          item.completed = !item.completed
        }
        //id不同就直接返回原來的值不修改，無論修改與否的的值都在這裡返回
        return item
      })
    })
  }