Delete button implemented #2

Merged
merged 1 commit into from Jan 10, 2017
@@ -5,6 +5,7 @@ export default class TodoItem extends React.Component {
super(props);
this.state = {id: props.id, text: props.text, isDone: props.isDone};
this.clickHandler = this.clickHandler.bind(this);
+ this.deleteHandler = this.deleteHandler.bind(this);
}
clickHandler(e) {
@@ -14,6 +15,13 @@ export default class TodoItem extends React.Component {
this.setState({isDone: true});
}
+ // Note: Delegate the delete operation to the parent as its none of my business
+ // Following Single Responsibility Priciple.
+ // Child should be allowed to touch parent's state data.
+ deleteHandler(e) {
+ this.props.deleteHandler(this.state.id)
+ }
+
stateSelector() {
if (this.state.isDone == true)
return ('striken');
@@ -24,8 +32,11 @@ export default class TodoItem extends React.Component {
render() {
console.log('I am executed');
return (
- <li onClick={this.clickHandler} className={this.stateSelector()}>
- {this.props.item.text}
+ <li>
+ <span onClick={this.clickHandler} className={this.stateSelector()}>
+ {this.state.text}
+ </span>
+ <button onClick={this.deleteHandler}>Delete</button>
@shivabhusal
shivabhusal Jan 10, 2017 Owner

I could have used this.props.deleteHandler instead, but I did not, because it would be difficult to find out the object's id from event object(e).

</li>
);
}
@@ -10,14 +10,17 @@ export default class TodoList extends React.Component {
// because it would point to the DOM object you just clicked; but you will need
// to point to an instance of this class instead.
this.submitHandler = this.submitHandler.bind(this);
+ this.deleteHandler = this.deleteHandler.bind(this);
+ // Initial State Database or AKA seeds
this.state = {
items: [
{id: 0, isDone: false, text: 'Play football'},
{id: 1, isDone: false, text: 'Play Volleyball'},
{id: 2, isDone: false, text: 'Play Tennis'},
{id: 3, isDone: true, text: 'Dance in Enrique Song'},
- ]
+ ],
+ deletedItems: [] // Lets keep track of deleted items as well; Just for fun ; Future reference
};
}
@@ -35,17 +38,39 @@ export default class TodoList extends React.Component {
id: (this.state.items.length + 1),
text: textField.value,
isDone: false
- })
+ }),
+ deletedItems: this.state.deletedItems
});
textField.value = '';
textField.focus();
}
+ // Note: Deleting has to be done in state level;
+ // If removed from DOM without updating state; the object will not actually be deleted;
+ // Will reappear when you update state next time.
+ deleteHandler(itemId) {
+ var newState = {items: [], deletedItems: []};
+ this.state.items.forEach((item) => {
+ if (item.id == itemId)
+ newState.deletedItems.push(item);
+ else
+ newState.items.push(item);
+ });
+
+ this.setState(newState);
+ }
+
list() {
return (
this.state.items.map((item) => (
- <TodoItem key={item.id} item={item}/>
+ <TodoItem
+ key={item.id}
+ id={item.id}
+ text={item.text}
+ isDone={item.isDone}
+ deleteHandler={this.deleteHandler}
@shivabhusal
shivabhusal Jan 10, 2017 Owner

I am passing the delete event handler function to the children, so that they can delegate the deleting job to the parent rather than doing by themselves which is not a recommended way.

+ />
))
);
}