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


#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!


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