Building a Simple Todo List App in React | kirupa.com


#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 https://www.kirupa.com/react/simple_todo_app_react.htm

#2

could you please explain the javascript syntax of the ref tag used on the input element of the TodoList component. thanks

ref={(a) => this._inputElement = a}


#3

It is using an ES6 feature known as arrow functions that is a shorthand way of writing the following:

(function (a) {
  return this._inputElement = a;
});

The end result is that the referenced element is assigned to the _inputElement property.

The Mozilla documentation is a good place to learn more about it: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

I also recorded a short video in case that helps: https://www.youtube.com/watch?v=Sh-NYbDcUug

:slight_smile:


Building a Simple Todo List App in React
#4

Do you have a demo page for the Todo List?

I can’t get mine to work. I get “items not defined”.

thank you


#5

Here you go: https://www.kirupa.com/react/examples/todo.htm :slight_smile:


#6

Thanks a lot :slight_smile:


#7

I’m still confused about the use of the “ref” property and the purpose of the callback.

ref={(a) => this._inputElement = a}

I understand that it equals the code below.

(function (a) {
return this._inputElement = a;
});

But, what’s the purpose of returning this.inputElement. What does “this” refer to and what is “a”?


#8

Hi Kirupa,

I have another question for you :grinning:
This evening I completed the Todo List, and I think I understand most of it.
I’m trying build upon it, and make a wish list app.

It looks like this, for right now.

The only thing is I’m having a hard time figuring out how to get these in the list to display. I thought I could:

<input ref={(a) => this._inputElement = a}
   placeholder="item">
</input>
<input ref={(b) => this._inputElement = b}
   placeholder="description">
</input>
<input ref={(c) => this._inputElement = c}
    placeholder="link">
</input>

But nothing is happening.

I know you’re probably busy, but if you have a chance, could help point me where in the code I could get this to work?


#9

@Elizabeth_Amanda,

Generally you want to avoid using ref if you can. The problem with your example is that you have 3 inputs and each one has a ref which assigns itself to the same instance property, _inputElement. So instead of having references to 3 different inputs, you have one reference that gets assigned a different input reference 3 different times - whose value will be the last input reference assigned to it. In fact it looks like you tried to fix this by changing the reference variable, but that’s not the one that makes a difference (a, b, and c). That can be the same for each, its the _inputElement that you’d want to be different.

But again, using ref isn’t preferred and can be avoided. So instead, set input values to state properties and detect changes with onChange. You just need to make sure you have properties for each of your inputs. Here’s an example: https://jsfiddle.net/v4qvt8bk/


#10

thank you @senocular, I definitely have a lot more to learn!