Как удалить объект из массива в реакт?

Question

[Aleksey D]

Есть массив с объектами задач, по клику кнопки нужно удалить задачу :
Вот код с компонента в котором создано состояние с массивом объектов
//
const deleteTodo = (Todo) => {
const deletedTodo = Todo.filter(item => item.id !== todo.id)
setTodo(deletedTodo)
} // по разному пытался менять состояние todo
//
Пропсы прокинуты в компонент кнопки по удалению:
//
//Функция в самом компоненте с кнопкой -- onClick={() => deleteTodo(todo)}
Пробовал по разному, либо удаляется полностью весь массив и остается на странице 1 пустой элемент, либо не происходит ничего вообще, смотрел в консоли постоянно по условию возвращает либо весь массив либо пустой, но ни как не удаленный элемент, скорее всего не знаю как правильно задать условие.
// Вот сам массив с объектами --
let newTodo = {
title: title,
id: Date.now(),
completed: completed
}
setTodo([...todo, newTodo])
//

Answer 1

[Alex Shatunov]

Воспользуйтесь фильтром, что-то типа
setTodo([...todo].filter(item => item.id !== id))
id - соответственно ид удаляемого объекта

Comments

[Aleksey D]

все равно не получается, вообще не могу понять, что нет

[Aleksey D]

Если делаю так const deletedTodo = Todo.filter(item => item.id !== todo[0].id)// указываю индекс элемента то все работает только соответственно удаляется всегда именно нулевой элемент, а не тот ан котором клик

[Alex Shatunov]

Посмотрите че делает фильтер https://developer.mozilla.org/ru/docs/Web/JavaScri..., мне кажется вы пытаетесь от фильтра получить немного не то.

[Aleksey D]

al77ex, да нет все то, нужно что бы в стейт массива попали все массивы кроме на который был клик

[szQocks]

Алексей Догадаев, проблема скорее всего в том что ты в кнопку прокидываешь объект, и у объекта вызываешь метод filter...а если ты прокидываешь массив тудушек и фильтруешь его, тогда с чем ты сравниваешь ? откуда берется todo.id

onClick={() => deleteTodo(todo)}

const deleteTodo = (Todo) => {
const deletedTodo = Todo.filter(item => item.id !== todo.id)
setTodo(deletedTodo)
}

вообще в deleteTodo желательно бы прокинуть просто id

[Aleksey D]

szQocks, Да до меня уже дошло, что с нечем сравнивать, а что ты имеешь ввиду 'прокинуть id'?можно по подробнее пожалуйста?

[szQocks]

Алексей Догадаев, id у туду объекта, куда ты записываешь Date.now()

[Aleksey D]

szQocks, да нет вообще ничего не получается просто пздц

[szQocks]

Алексей Догадаев, xDD, покажи отрисовку тудушек

[szQocks]

Алексей Догадаев, хотя не надо, написал

import React from 'react';

const dataTodos = [
    {
        id: '1',
        title: 'example title 1',
        completed: false
    },    {
        id: '2',
        title: 'example title 2',
        completed: false
    },
    {
        id: '3',
        title: 'example title 3',
        completed: true
    }
]
const Todos = () => {
    const [todos, setTodos] = React.useState(dataTodos);

    const deleteTodo = (id) => {
        setTodos(prev => prev.filter(n => n.id !== id))
    }

    return (
        <div>
            {todos.map(todo => <button key={todo.id} onClick={() => deleteTodo(todo.id)}>{todo.title}</button>)}
        </div>
    );
};

export default Todos;

[Aleksey D]

szQocks, отрисовку всм скрин или код?

[Aleksey D]

szQocks, вот у меня вот так было {todo.map((item, index) => {item.title} // это в одном и том же компоненте где массив,
//const BtnCompleted = ({deleteTodo,todo}) => {

return (
deleteTodo(todo)}>X
);
};

export default BtnCompleted;//
это уже в компоненте кнопки по удалению, сейчас попробую как у тебя

[szQocks]

Алексей Догадаев, гугли, про туду инфа 100% есть в интернете, тут редко когда на блюдечке преподносят инфу. хотя мне нравится хабр, каким бы он не был, он помог мне с трудностями

[Aleksey D]

szQocks, Да, как и ты мне, большое спасибо, теперь да понял, что с пропсами не работало потому что id не передавалось, ну наверное и это решить можно, больше спасибо еще раз!)

[Aleksey D]

szQocks, как помеить что ты решил вопрос?че то найти не могу