This is a companion discussion topic for the original entry at https://www.kirupa.com/codingexercises/todolist.htm
1 Like
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: <input ref={(a) => 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.
Could you briefly explain to me when and why you need to define a key?
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
@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?
You can use console.log 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 
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)
Haha! Thanks for pointing it out. I just fixed it
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.
If you open up the developer tools for your browser, are there any errors being reported?
The elements are showing up ok in dev tools ā¦
Canāt see any errors ā¦
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?
I checked npm and then it started wotking!!! 
Thanks, for now!
2 Likes
I fixed it, thanks anyway!
1 Like
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:
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?