zafar-saleem / react-todo Goto Github PK

Hi Zafar-

Thanks so much for writing this tutorial...it was very helpful. The syntax of your callback methods seems a bit strange in a few places. (If you deliberately did it this way for some reason, please forgive me.)

1. In the onDeleteHandle method, you're using an if/then where it's not really necessary:

this.setState({ mockData: this.state.mockData.filter(item => { if (item.id !== id) { return item; } }) }); }

It would be much clearer to write

this.setState({ mockData: this.state.mockData.filter(item => { return item.id !== id; }) });

2. In some of the event handlers, you're adding an extra return statement--

this.setState({ mockData: this.state.mockData.map(item => { if (item.id === this.state.id) { item['title'] = event.target.updatedItem.value; return item; } return item; }) });

--where, again, it's not really necessary:

this.setState({ mockData: this.state.mockData.map(item => { if (item.id === this.state.id) { item.title = e.target.updatedItem.value; } return item; }) });

I realize these are minor issues but they threw me for a bit of a loop when I was doing the tutorial.

Hi again-
In the render method of the Todo component, the line
<button onClick={this.onCompleteHandle}>Complete</button>
won't work as written. Without a .bind, the method can't update {this.state} and there's no reference to which entry is supposed to be marked complete.

So onCompleteHandle needs to have a .bind and to also be supplied item.id as an argument, as below:
<button onClick={this.onCompleteHandle.bind(this, item.id)}>Complete</button>