Как передать элемент для удаления?

Question

[dotnetlooper]

Делаю приложение, которые интегрируется с api. Приложение грубо говоря todo-list.
Интересует такой вопрос, есть компонент который отрисовуется десятки раз и хочу удалить какой-то из элементов.
Есть задача, выделить компонент и удалить его. Тут и происходит непонятки для меня, как мне передать элемент который хочу удалть

const renderNote = (note, index) => {
        return (
            <Note 
                key={ note.id } 
                index={ index } 
                id={ note.id }
                text={ note.text }
                date={ note.data } 
                title = { note.title }
                thumbnail={ note.thumbnail }
                description={ note.description }
                moveNote={ moveNote }
            />
        )
    };

....
<div>
            {
                notes && notes.map((note, i) => renderNote(note, i))
            }
</div>

Ну и потом сама кнопка на удаление, но пока ничего нет:

<FontAwesomeIcon 
                        icon={ faTrashAlt }
                        onClick={() => setModal("deleting")} 
                    />

Answer 1

[ParaBellum577]

Просто передайте в Note функцию, которая принимает индекс элемента, а потом по индексу убирайте из массива нужный элемент (Ну или по id, как угодно)

<Note 
                removeElement={() => handleDelete(index)}
            />

А сама функция что-то вроде этого

const [notes, setNotes] = useState([тут ваши Notes])
  const handleDelete = (index) => {
    let newNotes = [...notes];
    newNotes[index].splice(index, 1);
    setNotes(newNotes);
  };