# React - todolist - deleting

**URL:** https://forum.kirupa.com/t/react-todolist-deleting/652700
**Category:** web dev
**Created:** [July 20, 2022, 4:31am UTC](https://forum.kirupa.com/t/react-todolist-deleting/652700 "2022-07-20T04:31:24Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Seaqueue](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@Seaqueue](https://forum.kirupa.com/u/Seaqueue)
#### Post date: [July 20, 2022, 4:31am UTC](https://forum.kirupa.com/t/react-todolist-deleting/652700/1 "2022-07-20T04:31:24Z")

</div>

The onClick is listened by the delete function in TodoItems which is referred in TodoList’s with the “delete” prop that initialized with a delete function in TodoList.  
The actual filtering happens in TodoList, but the event listening happens in TodoItem, so, how did it work exactly? Can someone please explain the call flow?

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [July 21, 2022, 1:31am UTC](https://forum.kirupa.com/t/react-todolist-deleting/652700/2 "2022-07-21T01:31:23Z")

</div>

Hi @Seaqueue - welcome to the forums! Can you post a link to the code snippet so that we can take a better look at it? 🙂

---

<div class="post-metadata">

### Author: ![Seaqueue](https://avatars.discourse-cdn.com/v4/letter/s/f04885/32.png) [@Seaqueue](https://forum.kirupa.com/u/Seaqueue)
#### Post date: [July 21, 2022, 1:57am UTC](https://forum.kirupa.com/t/react-todolist-deleting/652700/3 "2022-07-21T01:57:42Z")

</div>

Hi Kirupa, Thank you for responding! I love your tutorials! The explanations are decent and thorough!  
The code is from the tutorial React-GoingFurther-Building a todolist: starting at Removing items. [Building an Awesome Todo List App in React | KIRUPA](https://www.kirupa.com/react/simple_todo_app_react.htm).

---

<div class="post-metadata">

### Author: ![Wayne](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wayne/32/16501_2.png) [@Wayne](https://forum.kirupa.com/u/Wayne)
#### Post date: [July 21, 2022, 4:55pm UTC](https://forum.kirupa.com/t/react-todolist-deleting/652700/4 "2022-07-21T16:55:05Z")

</div>

DeleteItem is a function in the TodoList which is a functional component that has all the todo list items. You are simply referencing that method in a delete button in a single item component but you are calling the main function in the Todolist.

It makes sense, when you think about it in a way if you are going to eat something from the fridge, you have to tell the fridge which item you have eaten so the frigde removes the item. You give the frigde the item ID and the frigde job is to hold all the food items updated. One single item can tell the fridge delete me im being eaten.
