การแก้ไขเนื้อหาแถวตารางเฉพาะใน React

ฉันได้สร้างตารางนี้และเพิ่มปุ่มที่จะอนุญาตให้แก้ไขและลบแถวที่ต้องการได้ ฉันได้ใช้ฟังก์ชันสำหรับการลบแล้ว แต่ไม่รู้ว่าจะเริ่มแก้ไขแถวใดแถวหนึ่งจากที่ไหน

นี่คือตาราง

ฉันเข้าใจว่าเมื่อฉันกดปุ่มแก้ไข ควรมีส่วนประกอบที่ติดตามจริงหรือเท็จ .. จริงแสดงมุมมองแก้ไข (ป้อนข้อความแทนที่ตำแหน่งที่เนื้อหาข้อความอยู่บนโต๊ะ) และเท็จเพียงแสดงเนื้อหาข้อความในตาราง . แต่นอกเหนือจากนั้นไม่แน่ใจว่าจะให้เฉพาะกล่องข้อความแสดงเฉพาะแถวที่ผู้ใช้กดแก้ไขได้อย่างไร

นี่คือรหัสสถานะของฉัน:

state = {
shoes : [
{
  name:”hello”
  list: [
  {
  {brand: 'klsdnalkd', type: 'da,sbd,ads', company: 'daskjbdas', binding: 'dasjdbas', style: 'dasdjkb', quantity: 1, id: 1},
  { brand: 'dyasidu82', type: 'dasdkasnd', company: 'dasndbamnsbda', quantity: 1, id: 2},
  { brand: 'dalsknda', type: 'dasljndas', company: 'dsaknal', quantity: 5, id: 3}
}]
]
}

ฉันเข้าใจว่าฉันต้องใช้รหัสเฉพาะของอาร์เรย์แต่ละตัวเพื่ออ้างอิงปุ่มแก้ไข แต่ฉันจะทำอย่างไรกับโค้ดที่ฉันมีอยู่แล้วในการแสดงผลตาราง

นี่คือโค้ดส่วนประกอบสำหรับการเรนเดอร์ตาราง (โปรดเพิกเฉยต่อฟังก์ชันที่ส่งผ่านบางส่วนที่นั่น ฉันแค่ลองทำสิ่งต่าง ๆ มากมายเพื่อลองใช้สิ่งนี้):

const TableRender = ({shoes, deleteShoeEvent, editingRowToggle, editRowToggle, showRowEditMode, showRowNormalMode}) => {
const [show, setShow] = useState(false);
const shoesList = shoes.map(shoe => {
    return(
        <tbody class="tbody">
            <tr class="tr" /*onMouseOver={() => setShow(!show)} onMouseOut={() => setShow(!show)}*/ key={shoe.id} {...!editingRowToggle ? showRowNormalMode: showRowEditMode}>
                <td class="td"> 
                    {shoe.brand}
                    <td>
                        <Button className="edit-delete-buttons" variant="tertiary" handleClick={editRowToggle} size="xs" >Edit</Button>
                        <Button className="edit-delete-buttons" variant="tertiary" size="xs" handleClick={() => {deleteShoeEvent(shoe.id)}}>Delete</Button>
                    </td>
                </td>
                <td class="td">
                    <div>{shoe.type}</div>
                    <div>{shoe.company}</div>
                    <div>{shoe.author ? shoe.author : null}</div>
                    <div>{shoe.binding ? shoe.binding : null}</div>
                    <div>{shoe.style ? shoe.style : null}</div>
                </td>
                <td class="td">
                    {shoe.quantity}
                </td>
            </tr>
        </tbody>
    )
})
return(
    <Fragment>
        {shoesList}
    </Fragment>
)
}

ความช่วยเหลือใด ๆ จะดีมาก