React

by shahrukh007

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class TodoAppParent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	           inputValue: '',
                 list:[],
                 edit_type : false,
                 index : ""
    }
      this.deleteItem = this.deleteItem.bind(this);
      this.editItem = this.editItem.bind(this);
  }
  
   getData(event) {
      this.setState({inputValue: event.target.value});
       }
       
   submitData(event) {
       event.preventDefault();
       var listArray=this.state.list;
       var obj={name:this.state.inputValue}
       if(!this.state.edit_type){
       listArray.push(obj);
       this.setState({list:listArray,
                     inputValue: ''});
   }
   else{
      this.state.list[this.state.index].name = this.state.inputValue;
      this.setState({list: this.state.list,
                   inputValue: '',
                   edit_type : false
                  });
   }
   }     
   
   deleteItem(index) {
    const list = this.state.list
    list.splice(index, 1)   
    this.setState({list:list,
                   inputValue: '',
                   edit_type : false
                  })
  }
  
  editItem(index) {
   let current_list = this.state.list[index].name;
   this.setState({inputValue: current_list,
                  edit_type : true,
                  index : index
                  })
  }
   
  render() {
    return (
      <div>
      <form onSubmit={this.submitData.bind(this)}>
       <input type="text" value={this.state.inputValue} onChange={this.getData.bind(this)} required/>
       <input type="submit" value="Submit" />
      </form>
      <TodoAppChild deleteItem={this.deleteItem} editItem={this.editItem} data={this.state}/>
      </div>
    )
  }
}

class TodoAppChild extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	
    }
  }
  
  deleteItem(index) {
   this.props.deleteItem(index);
  }
   editItem(index) {
   this.props.editItem(index);
  }
  
 ...