Building a Simple Todo List App in React


#1

by kirupa | 10 October 2016

If creating the Hello, World! example was a celebration of you getting your feet wet with React, creating the quintessential Todo List app is a celebration of you approaching React mastery! In this tutorial, we are going to tie together a lot of the concepts and techniques you've learned to create something that works as follows:


This is a companion discussion topic for the original entry at http://www.kirupa.com/react/simple_todo_app_react.htm

#2

Hello kirupa! Awesome article, again :slight_smile:. 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.


#3

Kreaton - here you go: Building a Simple Todo List App in React | kirupa.com

:slight_smile:


#4

Could you briefly explain to me when and why you need to define a key?


#5

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

:slight_smile:


#6

This is very clear, thank you @kirupa!
:slight_smile:


#7

@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?


#8

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 :frowning:


#9

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)


#10

Haha! Thanks for pointing it out. I just fixed it :slight_smile:


#11

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! :frowning:

For some reason the index.html file in src isn’t being updated from sublime text.


#12

If you open up the developer tools for your browser, are there any errors being reported?


#13

The elements are showing up ok in dev tools …


#14

Can’t see any errors …


#15

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?


#16

I checked npm and then it started wotking!!! :smiley:

Thanks, for now!


#17

Hi again. Now there’s this issue:

localhost_3000_.png


#18

I fixed it, thanks anyway!


#20

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:


#21

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?