# Building an Awesome Todo List App

**URL:** <https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214>\
**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:** 3

<div class="post-metadata">

**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 22, 2018, 6:38pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/42 "2018-03-22T18:38:28Z")

</div>

The issue seems to be in `addItem`. You are missing an extra `}` bracket to close out the `if` statement:

```
addItem(e){
    if(this._inputElement.value !== ""){
        var newItem = {
            text: this._inputElement.value,
            key: Date.now()
        };

        this.setState((prevState) => {
            return {
                items: prevState.items.concat(newItem)
            };
        });
    

        this._inputElement.value = "";
    }
    console.log(this.state.items);
    e.preventDefault();
}

```

I added it after the `this._inputElement.value = "";` line. That change seemed to clear up the errors VS Code flagged for me 🙂

---

<div class="post-metadata">

**Author:** ![webguync](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/webguync/32/2434_2.png) [@webguync](https://forum.kirupa.com/u/webguync)\
**Post date:** [March 22, 2018, 7:12pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/43 "2018-03-22T19:12:53Z")

</div>

Thanks, Kirupa, fix one error and get another :-).

Can you explain this one and how to debug?

```auto
×
TypeError: Cannot read property 'bind' of undefined
new TodoList
src/TodoList.js:15
  12 | };
  13 | 
  14 | this.addItem = this.addItem.bind(this);
> 15 | this.deleteItem = this.deleteItem.bind(this);
  16 | }
  17 | 
  18 | addItem(e){
View compiled
▶ 20 stack frames were collapsed.
./src/index.js
src/index.js:8
   5 | 
   6 | var destination = document.querySelector("#container");
   7 | 
> 8 | ReactDOM.render(
   9 | <div>
  10 | <TodoList/>
  11 | </div>,

```

---

<div class="post-metadata">

**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 22, 2018, 7:15pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/44 "2018-03-22T19:15:34Z")

</div>

Can you attach your revised TodoList.js file? That will help a bit, for the local copy of the file you sent earlier looks fine 🙂

---

<div class="post-metadata">

**Author:** ![webguync](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/webguync/32/2434_2.png) [@webguync](https://forum.kirupa.com/u/webguync)\
**Post date:** [March 22, 2018, 7:20pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/45 "2018-03-22T19:20:13Z")

</div>

yes, attached  
.[TodoItems.js](https://forum.kirupa.com/uploads/short-url/6rH1YQ50TnNsAUpqq6KxhAq0zpY.js) (752 Bytes)  
[index.js](https://forum.kirupa.com/uploads/short-url/tURo3VvL3ylfKtJxB5ARoxyHx3h.js) (249 Bytes)

---

<div class="post-metadata">

**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 22, 2018, 7:27pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/46 "2018-03-22T19:27:57Z")

</div>

Can you attach todolist? I think the error is happening there!

---

<div class="post-metadata">

**Author:** ![webguync](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/webguync/32/2434_2.png) [@webguync](https://forum.kirupa.com/u/webguync)\
**Post date:** [March 22, 2018, 7:32pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/47 "2018-03-22T19:32:06Z")

</div>

yes, that would help!  
[TodoList.js](https://forum.kirupa.com/uploads/short-url/qf7Etts1C9x3DG0oUX5ruwTyknt.js) (1.4 KB)

---

<div class="post-metadata">

**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 22, 2018, 8:42pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/48 "2018-03-22T20:42:03Z")

</div>

In your todolist, there is no `deleteItem` method. Did you delete it? That’s what the error is referring to. The `this.deleteItem` is undefined 🙂

---

<div class="post-metadata">

**Author:** ![webguync](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/webguync/32/2434_2.png) [@webguync](https://forum.kirupa.com/u/webguync)\
**Post date:** [March 22, 2018, 9:28pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/49 "2018-03-22T21:28:14Z")

</div>

indeed I did! Thanks. Works now except the CSS isn’t being picked up, but I think I can figure that out. Thanks for helping me!

---

<div class="post-metadata">

**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 22, 2018, 9:28pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/50 "2018-03-22T21:28:55Z")

</div>

No problem! Feel free to reply back if you run into any additional issues. There are a lot of moving parts with these demos, so the more eyes looking at it the better 😛

---

<div class="post-metadata">

**Author:** ![webguync](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/webguync/32/2434_2.png) [@webguync](https://forum.kirupa.com/u/webguync)\
**Post date:** [March 22, 2018, 9:46pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/51 "2018-03-22T21:46:59Z")

</div>

ok, one more question. In TodoList.js if I have imported the CSS at the top like this  
import “./TodoList.css”;

and TodoList.css is in the src directory with TodoList.js the CSS should be picked up, correct?

---

<div class="post-metadata">

**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 22, 2018, 10:48pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/52 "2018-03-22T22:48:50Z")

</div>

Correct. It should be picked up! 🙂

---

<div class="post-metadata">

**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 12, 2018, 9:43am UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/53 "2018-04-12T09:43:36Z")

</div>

To make it easier to reference, here is how the full `addItem` method looks when we use `concat` and `prevState` inside `setState`:

```
addItem(e) {
  if (this._inputElement.value !== "") {
    var newItem = {
      text: this._inputElement.value,
      key: Date.now()
    };
 
    this.setState((prevState) => {
      return { 
        items: prevState.items.concat(newItem) 
      };
    });
   
    this._inputElement.value = "";
  }
   
  console.log(this.state.items);
     
  e.preventDefault();
}
```

---

<div class="post-metadata">

**Author:** ![bkfwebdev](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bkfwebdev/32/9115_2.png) [@bkfwebdev](https://forum.kirupa.com/u/bkfwebdev)\
**Post date:** [May 12, 2018, 12:11am UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/54 "2018-05-12T00:11:20Z")

</div>

can’t seem to get the style sheet to work, strangely not getting any errors  
anybody care to take a look?

> **[bkfwebdev/react-todo](https://github.com/bkfwebdev/react-todo)**
>
> react-todo - learning react todo list app

---

<div class="post-metadata">

**Author:** ![bkfwebdev](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bkfwebdev/32/9115_2.png) [@bkfwebdev](https://forum.kirupa.com/u/bkfwebdev)\
**Post date:** [May 12, 2018, 3:41pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/55 "2018-05-12T15:41:37Z")

</div>

figured it out, typo in the class name, needed to step away for a minute in order to see it…

---

<div class="post-metadata">

**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 12, 2018, 5:00pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/56 "2018-05-12T17:00:26Z")

</div>

Haha! Those are always the worst and most difficult to debug. I cloned your repo a few minutes ago actually to investigate what is going on…but got distracted 😕😀

---

<div class="post-metadata">

**Author:** ![Roman\_Jamrisko](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/roman_jamrisko/32/9160_2.png) [@Roman\_Jamrisko](https://forum.kirupa.com/u/Roman_Jamrisko)\
**Post date:** [June 6, 2018, 4:20pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/57 "2018-06-06T16:20:47Z")

</div>

[TodoItems.js](https://forum.kirupa.com/uploads/short-url/4OXJ0dB7ogzhyzZEds2JQf8bfIz.js) (742 Bytes)  
[TodoList.js](https://forum.kirupa.com/uploads/short-url/zz49aAdNuTsh0yLmyC7nzUVByWT.js) (1.5 KB)

HI KIRUPA i am getting this warnings Warning: Each child in an array or iterator should have a unique “key” prop.

---

<div class="post-metadata">

**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:** [June 6, 2018, 4:31pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/58 "2018-06-06T16:31:19Z")

</div>

You need to put the key on the `<li>` not the `<button>`

---

<div class="post-metadata">

**Author:** ![Pornouma\_PROMSIRINIM](https://avatars.discourse-cdn.com/v4/letter/p/bc8723/32.png) [@Pornouma\_PROMSIRINIM](https://forum.kirupa.com/u/Pornouma_PROMSIRINIM)\
**Post date:** [June 15, 2018, 1:59am UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/59 "2018-06-15T01:59:46Z")

</div>

![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/0/0cd6ac5865c4a832e91ad6ddf2158b8f5f7e2015.png)

I have this problem.

---

<div class="post-metadata">

**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:** [June 15, 2018, 1:42pm UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/60 "2018-06-15T13:42:56Z")

</div>

You have to make sure delete is passed into the props

```auto
      <TodoItems entries={this.state.items}
                 delete={this.deleteItem}/>

```

---

<div class="post-metadata">

**Author:** ![dannyhz](https://avatars.discourse-cdn.com/v4/letter/d/50afbb/32.png) [@dannyhz](https://forum.kirupa.com/u/dannyhz)\
**Post date:** [June 29, 2018, 3:39am UTC](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214/61 "2018-06-29T03:39:35Z")

</div>

I have been following the tutorial to the best of my ability but my code doesn’t allow me to delete any list items. I did it all on codepen, can anyone look over my code and tell me what I am doing wrong? Here is the link. Note that I added a button to do the deleting the list items rather than attaching the onClick function to the li, I don’t think that would change the programming but I can very well be wrong.

[https://codepen.io/DannyHz/pen/jKxVMa?editors=1010](https://codepen.io/DannyHz/pen/jKxVMa?editors=1010)

I keep getting the error “this3 is not a function”, although earlier in the code I define this.deleteItem so I don’t know what I could have overlooked. Thanks!

Edit: I changed some stuff around and now the error I get is “this.props.delete is not a function”. What could I be missing?

[Previous page](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214.md?page=2)

[Next page](https://forum.kirupa.com/t/building-an-awesome-todo-list-app/636214.md?page=4)