"this" is undefined inside my Class

Question

There is a problem with my small todo app. Every time I try to delete an item there is an error Cannot read property 'todos' of undefined

Why this is bound inside addTodo but not removeTodo ?

The trigger is done here: <button onClick={() => removeTodo(id)}> X </button>

Demo on JSfiddle

Thanks.

Possible duplicate of [Arrow function vs function declaration / expressions: Are they equivalent / exchangeable?](http://stackoverflow.com/questions/34361379/arrow-function-vs-function-declaration-expressions-are-they-equivalent-exch) — Andreas, Mar 25 '17 at 16:30

score 0 · Accepted Answer · answered Mar 25 '17 at 17:17

0

You could make removeTodo into a property initialized arrow function or use the action.bound decorator. You also have to use MobX array replace so you don't lose the reference:

removeTodo = (id) => {
  var filtered = this.todos.filter(todo => todo.id !== id);
  this.todos.replace(filtered);
}

Or:

@action.bound
removeTodo(id) {
  var filtered = this.todos.filter(todo => todo.id !== id);
  this.todos.replace(filtered);
}

answered Mar 25 '17 at 17:17

Tholle

108,070
19
198
189

1

Thank you Tholle it's now working. I simply added ```@action.bound()``` to my function and everything is working as expected. – Jonathan Dion Mar 25 '17 at 17:58
@jonathandion Great! – Tholle Mar 25 '17 at 18:33

"this" is undefined inside my Class

1 Answers1