major bug fix occuring due to event.target

Author: divyanshu-rawat

src/Action_Creators/actions.js

@@ -11,5 +11,6 @@ export const addTodo = (VALUE) => ({
 export const deleteTodo = (VALUE) => ({
 	type: CONST.DEL_TODO,
 	ID: VALUE
+}
 
-});
+);

src/App.js

@@ -20,7 +20,10 @@ constructor(){
 
   deleteTODO(e){
 
+    console.log(e.target);
     let id = parseInt(e.target.id, 10);
+    // console.log('delete todo',id);
+    // console.log(typeof(id));
     this.props.deleteTodo(id);
   }
 
@@ -31,7 +34,7 @@ constructor(){
   	})
   }
 
-  handleClick(e){
+  handleClick_with_keypress_(e){
     if(this.state.input_value == '')
       return;
 
@@ -41,6 +44,14 @@ constructor(){
 
   }
 
+  checkTODO(e){
+    // console.log(e.target)
+    // console.log(e.target.id);
+    // let id = parseInt(e.target.id, 10);
+    
+    console.log(typeof(id));
+  }
+
   handleClick_without_keypress_(e){
     if(this.state.input_value == '')
       return;
@@ -58,16 +69,19 @@ constructor(){
 
       	<h1> A TO-DO Application </h1>
 
-      	<ADD className = "pad" value = {this.state.input_value} onKeyPress = {(e) => {this.handleClick(e)}} onChange = {(e) => {this.change(e)}} />    
+      	<ADD className = "pad" value = {this.state.input_value} onKeyPress = {(e) => {this.handleClick_with_keypress_(e)}} onChange = {(e) => {this.change(e)}} />    
+        
         <TODO className = "pad" handleClick = {(e) => {this.handleClick_without_keypress_(e)}}/>
+
         <ul className = "_ul">
          {this.props.TODO_ARRAY.map((listValue,index) => {
-
             return(
                <div id = {index}>
                   <li key={index} className = "_font" > {listValue.title} 
-                    <DEL value = {listValue.title} id = {index} onClick = {(e) => {this.deleteTODO(e)}} />
-                    <CHECK />
+
+                    <DEL id = {index} onClick = {(e) => {this.deleteTODO(e)}} />
+
+                    <CHECK id = {index} onClick = {(e)=>{this.checkTODO(e)}}/>
                   </li>
                </div>
                )

src/Components/check_todo.js

@@ -4,7 +4,10 @@ import ReactDOM from 'react-dom';
 
 
 function CHECK(props) {
-	return(<button className = " _left btn btn-default"><i className="fa fa-check"></i></button>)
+	return(
+			<button className = " _left btn btn-default" id = {props.id} onClick = {props.onClick} >
+				<i id = {props.id} className="fa fa-check"></i>
+			</button>)
 }
 
 export default CHECK;

src/Components/del_todo.js

@@ -1,11 +1,15 @@
 
+
+
 import React from 'react';
 import ReactDOM from 'react-dom';
 
 
 function DEL(props) {
-	// console.log(props);
-	return(<button className = " _left btn btn-default"  type = "text" id = {props.id} value = {props.value} onClick = {props.onClick} ><i className="fa fa-close"></i></button>)
+	return(
+		<button className = " _left btn btn-default" id = {props.id} onClick = {props.onClick} >
+		 <i id = {props.id} className="fa fa-close"></i>
+		</button>)
 }
 
 export default DEL;

src/Reducers/reducer.js

@@ -11,6 +11,7 @@ const intialState = {
 export const TodoList = (state = intialState , action) =>{
 
 	console.log('In Reducer',action);
+	
 	switch(action.type){
 
 		case 'ADD_TODO':