add remove method in react

Author: The-manpreet-singh

index.html

@@ -215,7 +215,16 @@ <h1>Goal</h1>
 function List(props) {
 return (
 <ul>
-<li>LIST</li>
+ {props.items.map((item) => (
+ <li key={item.id}>
+ <span>
+ {item.name}
+ </span>
+ <button onClick={() => props.remove(item)} >
+ X
+ </button>
+ </li>
+ ) )}
 </ul>
 );
 }
@@ -233,14 +242,19 @@ <h1>Goal</h1>
 id: generateId(),
 })
 );
-}
+ }
+ 
+ removeItem = (todo) => {
+ this.props.store.dispatch(removeTodoAction(todo.id))
+ }
+ 
 render() {
 return (
 <div>
 <h1>Todo List</h1>
 <input type="text" placeholder="add todo" ref={(input) => (this.input = input)} />
 <button onClick={this.addItem}>Add ToDo</button>
-<List />
+<List remove={this.removeItem} items={this.props.todos} />
 </div>
 );
 }
@@ -258,14 +272,18 @@ <h1>Todo List</h1>
 id: generateId(),
 })
 );
-}
+ }
+ 
+ removeItem = (goal) => {
+ this.props.store.dispatch(removeGoalAction(goal.id))
+ }
 render() {
 return (
 <div>
 <h1>Goals</h1>
 <input type="text" placeholder="add goals" ref={(input) => (this.input = input)} />
 <button onClick={this.addItem}>Add Goals</button>
-<List />
+<List remove={this.removeItem} items={this.props.goals} />
 </div>
 );
 }