sasaarhipov21432gmailcom's questions

我不知道如何确保在单击按钮时删除这个元素，而不是整行，我已经为这个问题坐了一个多小时。请告诉我如何准确删除一个元素及其按钮

import React, { useEffect, useState, Fragment } from 'react'
import { nanoid } from 'nanoid'

const initProds = [
    { id: nanoid(), name: 'prod1', catg: 'catg1', cost: 100 },
    { id: nanoid(), name: 'prod2', catg: 'catg2', cost: 200 },
    { id: nanoid(), name: 'prod3', catg: 'catg3', cost: 300 },
]


function App() {

    let [notes, setNotes] = useState(initProds)

    function deleteItem(name, prop, id) {
        setNotes(notes.map(note => {
            console.log(note[name])
            return note[name] !== prop ? note : delete note[name]
        }))
    }

    let result = notes.map(elem => {
        return <tr key={elem.id}>
            <td>{elem.name}<button onClick={() => deleteItem('name', elem.name, elem.id)}>delete</button></td>
            <td>{elem.catg}<button onClick={() => deleteItem('catg', elem.catg, elem.id)}>delete</button></td>
            <td>{elem.cost}<button onClick={() => deleteItem('cost', elem.cost, elem.id)}>delete</button></td>
        </tr>
    })

    return <div>
    <table>
            <tbody>
            {result}
        </tbody>
    </table>
        
        
    </div>
}
export default App