Skip to content

Instantly share code, notes, and snippets.

@danilosilvadev
Last active July 20, 2017 22:32
Show Gist options
  • Save danilosilvadev/9001c74422516e94f56a8a2be4dd171c to your computer and use it in GitHub Desktop.
Save danilosilvadev/9001c74422516e94f56a8a2be4dd171c to your computer and use it in GitHub Desktop.
import React, { Component } from 'react'
const List = props => {
let list = props.list;
const itensList = props.list.map((list) => {
return <li key={list.id}>
<span>{list.id} - {list.item}</span><br />
<button onClick={() => this.handleReplace(list.id)}>Replace</button>
<button onClick={() => this.handleDelete(list.id)}>Delete</button>
</li>;
});
if (itensList === null || itensList === "" || itensList === undefined) {
return <li>empty</li>;
} else {
return <ul>{itensList}</ul>;
}
}
const Update = () => {
<div>
<label>
<input type="text" onChange={this.handleChange} />
</label>
<label>
<input type="submit" value="Update" />
</label>
<button onClick={this.cancelUpdate}> Cancel </button>
</div>
}
class Form extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
showForm: false,
counter: 0,
idMirror: null,
newItem: ''
};
this.handleReplace = this.handleReplace.bind(this);
this.handleDelete = this.handleDelete.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.cancelUpdate = this.cancelUpdate.bind(this);
this.handleUpdate = this.handleUpdate.bind(this);
}
handleChange(event) {
this.setState({ item: event.target.value });
//console.log(event.target.value)
}
handleSubmit(event) {
event.preventDefault();
let item = this.state.item;
if (item === null || item === "" || item === undefined) {
return alert('Writte something');
} else {
const counter = this.state.counter + 1
this.setState({
list: [
...this.state.list,
{ item: item, id: counter }
],
counter
});
}
}
loadList(list) {
}
handleReplace(id) {
this.setState({ idMirror: id })
this.setState({ showForm: true });
}
handleDelete(id) {
console.log('delete ' + id);
this.setState(state => {
const filteredList = state.list.filter(item => item.id !== id);
return { list: filteredList };
});
}
cancelUpdate(e) {
e.preventDefault();
return this.setState({ showForm: false });
}
loadFields() {
if (this.state.showForm === false) {
return <div></div>
}
return <Update />;
}
handleUpdate(e) {
e.preventDefault();
let item = this.state.item;
let list = this.state.list;
let idMirror = this.state.idMirror;
if (item === null || item === "" || item === undefined) {
return alert('Writte something');
} else {
let index = list.findIndex(x => x.id === idMirror);
list.splice(index, list[index] = { id: idMirror, item: this.state.item })
this.setState({ showForm: true })
console.log(index);
}
}
render() {
const { list } = this.state;
return (
<div><form onSubmit={this.handleSubmit}>
<label>
<span>Add item</span>
<input type="text" onChange={this.handleChange} />
</label>
<input type="submit" value="Add" />
</form>
<List list={list} />
<form onSubmit={this.handleUpdate}>{this.loadFields()}</form>
</div>
)
}
}
export default Form
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment