Пишем список задач(todo app) на React

[fedordostoevskiy]

Молодчина, очень толково. За полчаса все, что я 2 дня по кускам собирал по всему интернету.
Там то на хуках все было, то наоборот - кнопка и input вообще без логики. А тут - все, что недопонимал нашел. Best practicus !

[kuckklux]

не работает
задачи добавляются в удвоенном количестве
выполнение задач работает не корректно
отключение React.StrictMode решает проблему с удвоенным количеством задач, однако вторая проблема остается
исходный код по ссылке отличается от примера, разобранного в видео

[anastasiiam]

Спасибо вам! Материал просто золото, очень помогло с тестовым!

[МихаилГасанов-эы]

Добрый день. Почему то у меня задача добавляется дважды?

[daniilukraine]

18:30 на этих минутах пишет две функции которые можно заменить одной, + писал на хуке отличий почти нет
const hadleClickTask = (id) => {
setTasks((tasks) =>
tasks.map((task) =>
task.id === id ? { ...task, done: !task.done } : task
)
);
};

[МихаилБыков-иг]

Все круто, но иммутабельность не сохраняется. State изменяется напрямую.

[nouchance]

Здравствуйте Артём, почему на канале нету новых видосов?

[murad]

Загвоздка). map() ведь возвращает массив но здесь мы почему то обходимся без оператора . . . spread.
То что работает, конечно, замечательно, но объясните пожалуйста логику для полного дзена).
render(){
let activeTasks = !task.done);
let doneTasks = task.done);

return (
<div className='App'>
<div className='top'>Active tasks: {activeTasks.length}</div>
{ [...activeTasks, ...doneTasks].map((task) =>
<Task
key={task.id}
task={task}
doneTask={() => this.doneTask(task.id)}
removeTask={() => this.removeTask(task.id)}
/>
)}
<Taskinput
addTask={this.addTask}
/>
</div>
)
}

Удалять задачи можно вот так тоже
removeTask = (id) => {
let newTasks = task.id !== id);
this.setState({
tasks : newTasks
})
}

[PoRoKLusT]

Удаление/выполнение через indexOf() работает в данном случае криво. По крайней мере у меня.
При изначальном добавлении задач всё ок, id в массиве совпадают с индексом элемента в массиве (добавили первый элемент, у меня id: 0 и он 0 элемент и т.д.), добавим так три элемента, получим id:0 с task[0], id:1 в массиве [1], id:2 в массиве [2]. Удаляем [1]. Теперь снова добавляем новый таск, длина массива сейчас 2, то есть у нового таска будет id: 2 в массиве [2]. Смекаете? Теперь у нас два элемента с одинаковыми id, indexOf вернет первый найденный элемент, это всегда будет тот второй, который добавляли изначально, даже если вы жмете кнопку на вновь добавленном и удаляться у вас будет совсем не то что нужно.
Для понимания, на последнем из описанных этапов массив с тасками будет выглядеть так:
0: {id: 0, title: '0', complete: false}
1: {id: 2, title: '2', complete: false}
2: {id: 2, title: '3', complete: false}

Соответственно если нажать на 2 элемент, то удалится первый.

Решил так (всё гораздо проще получается):
deleteTask(index) { // индекс тот что назначается в компоненте List через map, он же там key=index
const { allTasks } = this.state;
const updatedAllTasks = allTasks.slice(); // делаем не глубокое копирование
updatedAllTasks.splice(index, 1);
this.setState({ allTasks: updatedAllTasks });
}

Выполнение таска тоже по другому сделал, вообще я хоть и абсолютный новичок, но мне не понравилось явное присвоение done = true. В таком случае нельзя вернуть обратно, а если пользователь случайно нажал или что-то не доделал, потом вспомнил и хочет сделать задачу снова активной? Тут нужен аналог toggle из ванилы js.
Реализовал так:
completeTask(index) {
const { allTasks } = this.state;
let updatedAllTasks = allTasks.map((task, id) => { // index всё так же передаём из map в компоненте List
if (index === id) {
task.complete = !task.complete;
}
return task;
});
this.setState({ allTasks: updatedAllTasks });
}

Пока получается что присвоение id объекту (таску) вообще не нужно. Это очень подозрительно, скорее всего неправильно, но пока других вариантов не вижу.

[dimidrolbokser]

Почему у меня 2 таски создает одинаковых?

[s.konstantin]

Добрый день.
Удаление через filter у меня работает
deleteTask = id => {
const filterTask = this.state.tasks.filter(task => task.id !== id)
this.setState({ tasks: filterTask })
}
можно и так
deleteTask = id => {
let newTasks = [...this.state.tasks]

const idx = newTasks.findIndex(task => task.id === id)

if (idx !== -1) {
newTasks.splice(idx, 1)
this.setState({ tasks: newTasks })
}
}

[vitaliitravin]

Хочу посмотреть код, но не получается скачать с гугл диска. Может кто нибудь работающую ссылку отправить?

[Бензини]

Опишите, в чем разница между vue и react, с точки зрения результатов и возможностей. Реакт вроде нацелен на отрисовку хтмл, а Вью более слабая штука, просто удобный приемник джкуэри, это первое впечатление

[erjan]

У меня не получается взять исходники. Как скачать то?
Можно же было на гит залить, все бы разобрались

[АлексейЧерноусов-дф]

Можно развить эту идею в приложение наподобие всяких таск-менеджеров в духе Jira. Даже примитивная работа такого уровня будет хорошо оценена различными HR.
Единственная просьба на будущее - голос чуть громче, музыка немного сбивает с толку, когда на примерно одном уровне с разговаривающим человеком.

[sauvignonblanc]

Даже не знаю что пока выбрать... Vue or React. Пока смотрю практические уроки как обзор.
"Начал" (😁) диплом писать по теме JS. Основы JS знаю, в ES6 с классами пока не оч. Стоит ли уже переходить к изучению фреймворка/библиотеки?
Времени не так много, а хочется на диплом запилить что-то годное, так сказать выпендриться :)
Да, кстати, дизайнишь топово, оч красиво👍🏼 Как научиться красиво стайлить если не изучал основы веб-дизайна, а есть знания только CSS и JS?) (сорян за 100500 вопросов)
*Комменты, что находятся ниже, читал)*

[s.konstantin]

И еще, насколько я знаю state push'ить напрямую неправильно (в addTask) 22:00

[paradase]

хочу взять исходный css код кидает на страницу в фейсбуке какаю-то что за бред

[tuRistst]

Вот тру способ удаления задачи, без метода delete.
deleteTask = (id) => {
let task_index = this.state.tasks.map(task => task.id).indexOf(id);
this.setState(state => {
let { tasks } = state;
tasks.splice(task_index, 1);
return tasks;
})
}

Правда как говорят ниже, здесь осталась проблема с изменением стейта напрямую. Как решить правильно я пока хз.

[elliotgnome]

Не подскажешь вообще где и как изучал html css js вот к такому уровню?