# Building an Awesome Todo List App **URL:** \ **Category:** programming\ **Created:** [March 20, 2017, 3:22am UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214 "2017-03-20T03:22:50Z")\ **Posts on this page:** 20\ **Page:** 1
**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:** [March 20, 2017, 3:22am UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/1 "2017-03-20T03:22:50Z")
This is a companion discussion topic for the original entry at [https://www.kirupa.com/codingexercises/todolist.htm](https://www.kirupa.com/codingexercises/todolist.htm) ---
**Author:** ![kreaton](https://avatars.discourse-cdn.com/v4/letter/k/c5a1d2/32.png) [@kreaton](https://forum.kirupa.com/u/kreaton)\ **Post date:** [April 7, 2017, 1:53pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/2 "2017-04-07T13:53:46Z")
Hello kirupa! Awesome article, again šŸ™‚. I have finished with the theoretical part and started to practice. The only thing that is not quite clear to me is this line: ` this._inputElement = a} placeholder="enter task">`. I understand what this piece of code does, but syntax inside **ref** is not familiar to me. Could you explain it or at least provide a link to the docs? Thanks. ---
**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:** [April 7, 2017, 11:24pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/3 "2017-04-07T23:24:52Z")
Kreaton - here you go: [Building a Simple Todo List App in React | kirupa.com](http://forum.kirupa.com/t/building-a-simple-todo-list-app-in-react-kirupa-com/636228/3?u=kirupa) šŸ™‚ ---
**Author:** ![gregypooh](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gregypooh/32/8366_2.png) [@gregypooh](https://forum.kirupa.com/u/gregypooh)\ **Post date:** [April 14, 2017, 12:21am UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/4 "2017-04-14T00:21:46Z")
Could you briefly explain to me when and why you need to define a key? ---
**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:** [April 14, 2017, 3:30pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/5 "2017-04-14T15:30:25Z")
The way React works is by figuring out which DOM elements need to be updated and optimizing those updates. For elements that are dynamically created, there is no easy way to identify which elements maps to which piece of data. The key helps with that. The key allows you to create a mapping between a visual and the data (from an array, web service, etc.) that React can optimize changes for. For example, letā€™s say you are displaying 10 items from an array. If Item #5 is the only one that changes, React would want to only update the visual for just that item. Without a key value, it would have no way of knowing how to go from data in the array to specifically Item #5. It would have to unnecessarily update all 10 items. The key avoids that from happening. Now, in more recent versions of React, the key is automatically set I believe. I will need to dig-in further and see when that does or doesnā€™t happen. This article goes a bit further into what I explained: [https://www.kirupa.com/react/from\_data\_to\_ui\_in\_react.htm](https://www.kirupa.com/react/from_data_to_ui_in_react.htm) šŸ™‚ ---
**Author:** ![gregypooh](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/gregypooh/32/8366_2.png) [@gregypooh](https://forum.kirupa.com/u/gregypooh)\ **Post date:** [April 14, 2017, 7:02pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/6 "2017-04-14T19:02:44Z")
This is very clear, thank you @kirupa! šŸ™‚ ---
**Author:** ![Cecillia](https://avatars.discourse-cdn.com/v4/letter/c/3bc359/32.png) [@Cecillia](https://forum.kirupa.com/u/Cecillia)\ **Post date:** [May 30, 2017, 1:42am UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/7 "2017-05-30T01:42:53Z")
@kirupa Sir, may i ask you about how to view the array with all those added input in window console? Moreover, what if i want add a function to delete the added task? How to write it? ---
**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:** [May 30, 2017, 12:10pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/8 "2017-05-30T12:10:17Z")
You can use [console.log](https://www.kirupa.com/html5/console.htm) on the items array to inspect what is happening. To delete an added task, that requires a little bit more wrangling. Itā€™s on my list of things to describe in the future, but I donā€™t have it done yet - sorry ā˜¹ ---
**Author:** ![momesana](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/momesana/32/8745_2.png) [@momesana](https://forum.kirupa.com/u/momesana)\ **Post date:** [October 15, 2017, 1:16pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/9 "2017-10-15T13:16:16Z")
Typo: Type in a task or item or whatever you want into the inout field and press Add (or hit Enter/Return) =\> Type in a task or item or whatever you want into the input\* field and press Add (or hit Enter/Return) ---
**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:** [October 15, 2017, 3:35pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/10 "2017-10-15T15:35:10Z")
Haha! Thanks for pointing it out. I just fixed it šŸ™‚ ---
**Author:** ![wuppimon](https://avatars.discourse-cdn.com/v4/letter/w/e5b9ba/32.png) [@wuppimon](https://forum.kirupa.com/u/wuppimon)\ **Post date:** [December 12, 2017, 5:50pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/11 "2017-12-12T17:50:34Z")
HELP! Iā€™ve reached this stage: ā€œTake a moment to glance at what weā€™ve added. There is a bunch of JSX that gets our form elements up and running. To use our newly created TodoList component, letā€™s go back to index.js and reference it to see what our app looks like right now. Go ahead and make the following two changes:ā€ I saved all the changes and previewed in the browser but itā€™s blank! ā˜¹ For some reason the index.html file in src isnā€™t being updated from sublime text. ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [December 12, 2017, 6:20pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/12 "2017-12-12T18:20:33Z")
If you open up the developer tools for your browser, are there any errors being reported? ---
**Author:** ![wuppimon](https://avatars.discourse-cdn.com/v4/letter/w/e5b9ba/32.png) [@wuppimon](https://forum.kirupa.com/u/wuppimon)\ **Post date:** [December 12, 2017, 8:01pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/13 "2017-12-12T20:01:17Z")
The elements are showing up ok in dev tools ā€¦ ---
**Author:** ![wuppimon](https://avatars.discourse-cdn.com/v4/letter/w/e5b9ba/32.png) [@wuppimon](https://forum.kirupa.com/u/wuppimon)\ **Post date:** [December 12, 2017, 8:01pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/14 "2017-12-12T20:01:41Z")
Canā€™t see any errors ā€¦ ---
**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\ **Post date:** [December 12, 2017, 8:05pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/15 "2017-12-12T20:05:29Z")
As in you can see the HTML elements getting rendered to the DOM in the dev tools? But theyā€™re not showing in the page? When you say ā€œblankā€ is it white or blue? Have you checked your terminal/command prompt to see if `npm start` had reported any errors? ---
**Author:** ![wuppimon](https://avatars.discourse-cdn.com/v4/letter/w/e5b9ba/32.png) [@wuppimon](https://forum.kirupa.com/u/wuppimon)\ **Post date:** [December 12, 2017, 8:10pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/16 "2017-12-12T20:10:48Z")
I checked npm and then it started wotking!!! šŸ˜ƒ Thanks, for now! ---
**Author:** ![wuppimon](https://avatars.discourse-cdn.com/v4/letter/w/e5b9ba/32.png) [@wuppimon](https://forum.kirupa.com/u/wuppimon)\ **Post date:** [December 13, 2017, 1:35pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/17 "2017-12-13T13:35:52Z")
Hi again. Now thereā€™s this issue: ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/d/daa54476b212960f24ead6a27372a3c307d11b7b.png)localhost\_3000\_.png ---
**Author:** ![wuppimon](https://avatars.discourse-cdn.com/v4/letter/w/e5b9ba/32.png) [@wuppimon](https://forum.kirupa.com/u/wuppimon)\ **Post date:** [December 13, 2017, 2:28pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/18 "2017-12-13T14:28:08Z")
I fixed it, thanks anyway! ---
**Author:** ![MegxD](https://avatars.discourse-cdn.com/v4/letter/m/73ab20/32.png) [@MegxD](https://forum.kirupa.com/u/MegxD)\ **Post date:** [January 1, 2018, 9:23pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/20 "2018-01-01T21:23:54Z")
Thank you for the way how you explain the Todo app in React. This is my second contact with React, first one was ā€˜Hello, Worldā€™, also with your example. I want to go ahead, but I am stuck. I copy code text to my IDE, so everything should work, but I got message: ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/c/ce21cb37cee15403110cf45d9e7e4500ba6fbccb.png) ---
**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:** [January 2, 2018, 1:38am UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/21 "2018-01-02T01:38:30Z")
It looks like `this.props.entries` isnā€™t returning any values or is something other than an Array. Can you check if that is indeed the case? [Next page](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214.md?page=2)