You are right in that an arrow function would be more concise. There isn’t a right or wrong way, but I think I will revise this content in the future to just use arrow functions.
I tried to redo the Todo List App with functional components today. The one problem that I have is that the component is not refreshed after the submit method (addItem) is called. So the items do not get shown from the TodoItems component. I am not sure what I did wrong or missed.
Yes. This is my version of the TodoList.js using functional components. I have also included the TodoItems.js as reference. It is using a class component as you did in the tutorial. I have not converted it yet.
Thanks for the code! Does your items array contain an accurate list of the tasks added? If you add a console.log call to createTasks in TodoItems, does it get called for each task added as well?
Yes sir. I just verified that that the items array in the state does have the accurate list each time I add a new task. I added a console.log() in the createTasks call in TodoItems, but it never gets called when I add a task. It is as if the TodoList component is not refreshing on submit.
Hi @nishaanth_vikram - you are right. If it works without the binding, then it is just an oversight on my part. Something for me to revise in a subsequent edition
Hi Kirupa! Thank you for the awesome tutorial I am however having trouble getting the ul list to show. When I type a task and press “add” the entire page goes blank.
" TypeError: todoEntries.map is not a function. (In ‘todoEntries.map(this.createTasks)’, ‘todoEntries.map’ is undefined) " This is the error code I get.
This is very strange! The type of this.props.entries is correctly set to be an Array. The error you are seeing typically happens when map is being called on something that isn’t Array-like.
Just for kicks, can you replace the var todoEntries line with this:
This addition now works somewhat Now after when I press “add” the page does not disappear and this is what is shown at console after one input. But somehow I still don’t get it to show the list of added items
Thank you for your reply! @senocular If I use the concat here the following error occurs I used “toString” here to get rid of the error, this is very confusing
@kirupa@senocular Could this happen because of the style of my app? I´m practicing a single page application with two other “pages” and I am using react-router-dom