ReactJS Tutorial 41: Todo App Part 14 Delete Functionality In React

In this lecture we will learn how to implement a delete functionality in a React app.

[matejsfitness]

Hearing todossetotodos so many times is just confusing at this point lol

[Ivsti]

10:43 the filter function returns a new array thats different from todos. todos still has its value you're only returning a new array, is'nt this a risk🤔. Great video Code Stoic👍 as always i will finish your course.

[timetusmessor]

I started learning with your previous series, but then i saw you have Vite + React and i moved there. Videos are great, and i like that you are repeating every step and making mistakes, reminding us of what we should focus on. Also it help people to understand that no matter how you are experienced in coding, as you are, there is still room for mistakes and way of fixing them.
I have one question. How to prevent empty input appears on list? I noticed that console reporting error in such cases, saying that two children should't have same name?
Thank you and best regards.

[groundingtiming]

will you be covering HTTP request in this series?

[rahulmehndiratta]

I wish you had mentioned in this video that on clicking delete after setTodos in handle delete TodoList will re-render because it's props are changing due to state change in its parent component Todo and therefore the delete happens automatically in the UI .Otherwise awesome video 🙂 .

[MyriadColorsCM]

I believe that, since TodoItem represents a specific item instance within the array, you do not necessarily have to pass it as a parameter.

Am I missing something?

[noelkitonga]

Please share the github repo to this project

[hanyhassan]

First, thank you for the video, second, you broke the responsibilities between components, you could have just passed the delete handler from the Todolist component to the todoItem component so that it's being called from child when the delete button clicked but will keep handling the delete from the parent component that's responsible for todolist itself

[MagicAndReason]

I'm seven minutes in and I think the last few minutes could have benefitted from a diagram of how we're passing setTodo from its origin in the Todo component, then to the TodoList component, then to the TodoItem component where it can be used in handleDelete(). It's getting pretty hairy.

Just wait until I show you what I had to do for the TypeScript changes to the parameter list. Haha. This is a bit bonkers for a beginner.

[MagicAndReason]

Here's the changes that I did to make it work in TypeScript:
import styles from "./todoitem.module.css";

export default function TodoItem({
item,
todos = [],
setTodos,
}: {
item: string;
todos: string[];
setTodos: (todos: string[]) => void;
}) {
function handleDelete({ item }: { item: string }) {
setTodos(todos.filter((todo: string) => todo !== item));
}

return (
<div className={styles.item}>
<div className={styles.itemname}>
{item}
<span>
<button
onClick={() => handleDelete({ item })}

>
x
</button>
</span>
</div>
<hr className={styles.line} />
</div>
);
}