Реакт - вывод таблицы и удаление в ней элементов

Question

Не могу понять как сделать так чтобы при клике на кнопку удалялся именно этот элемент, а не вся строка, сижу уже более часа с этой проблемой. Подскажите пожалуйста как удалить именно один элемент и кнопку к нему

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

Answer 1

import React, { useState } 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) {
        let arr = notes.map(note => {

            if(note[name] !== prop){
               return note
            }else{ 
                delete note[name]
                return note
            }
        })

        setNotes(arr)
    }

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

БЛОГ НА HUSL

Реакт - вывод таблицы и удаление в ней элементов

Ответы (1 шт):