Building an Awesome Todo List App

programming
42

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

43

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

Can you explain this one and how to debug?

×
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>,
44

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

45

yes, attached
.TodoItems.js (752 Bytes)
index.js (249 Bytes)

46

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

47

yes, that would help!
TodoList.js (1.4 KB)

48

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

49

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!

1 Like
50

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

51

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?

52

Correct. It should be picked up! :slight_smile:

53

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();
}
54

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

55

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


1 Like
56

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 :confused::grinning:

57

TodoItems.js (742 Bytes)
TodoList.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.

58

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

1 Like
59

image
image.png1171×795 30.2 KB

I have this problem.

60

You have to make sure delete is passed into the props

      <TodoItems entries={this.state.items}
                 delete={this.deleteItem}/>
1 Like
61

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

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?