Bom dia, quando eu insiro um novo item, ele não está atualizando minha lista, segue o código:
import React, {Component} from 'react';
import Header from './Header';
class ListTodo extends Component{
render(){
var items = this.props.itemsTodo.map(item => {
return (
<ListItem key={item.index} index={item.index} item={item} onExclude={this.props.onExclude} onCheck={this.props.onCheck} />
);
})
return(
<div>
<ul className="list-group">{items}</ul>
<button type="button" className="btn btn-danger btn-sm btn-block" onClick={this.props.onExcludeAll}> Remover Todos</button>
</div>
)
}
}
class ListItem extends Component{
onCheck(event){
event.preventDefault();
var index = this.props.index;
this.props.onCheck(index);
}
onExclude(){
var index = this.props.index;
this.props.onExclude(index);
}
render(){
var todoClass = this.props.item.check ? "check" : "uncheck";
return(
<div>
<li className="list-group-item">
<div className={todoClass}>
<span className="checkItem" onClick={this.onCheck.bind(this)} >✔</span>
{(this.props.item.value)}
<button type="button" className="close" onClick={this.onExclude.bind(this)}>×</button>
</div>
</li>
</div>
)
}
}
class Form extends Component{
constructor(props){
super(props);
this.state = ({itemsTodo: this.props.itemsTodo});
}
onSubmit(e){
e.preventDefault();
var teste = [];
this.props.itemsTodo.unshift({
index: this.props.itemsTodo.length, // Pega o tamanho da lista e adiciona mais 1
value: this.itemList.value, // Pega o valor que foi inserido no Input
check: false // Passa por padrão o atributo falso para apontar que a tarefa não foi checada
});
this.setState({itemsTodo: this.props.itemsTodo});
}
render(){
return(
<form onSubmit={this.onSubmit.bind(this)} className="form-inline">
<div className="input-group">
<input type="text" className="form-control" placeholder="New Item in List" ref={input => this.itemList = input} />
<span className="input-group-btn">
<button type="submit" className="btn btn-primary">Add</button>
</span>
</div>
</form>
)
}
}
export default class ActionsList extends Component{
constructor(){
super();
this.state = {itemsTodo: []};
}
onExclude(itemList){
this.state.itemsTodo.splice(itemList, 1); // Remove um item da lista na posição passada por parametro
this.setState({itemsTodo: this.state.itemsTodo});
}
onCheck(itemList){
var items = this.state.itemsTodo[itemList];
this.state.itemsTodo.splice(itemList, 1);
items.check =!items.check;
this.state.itemsTodo.push(items);
this.setState({itemsTodo: this.state.itemsTodo});
}
onExcludeAll(){
var items = this.state.itemsTodo;
this.state.itemsTodo.splice(items);
this.setState({itemsTodo: this.state.itemsTodo});
}
render(){
return(
<div id="main">
<Header />
<Form itemsTodo={this.state.itemsTodo} />
<ListTodo itemsTodo={this.state.itemsTodo} onExclude={this.onExclude.bind(this)} onCheck={this.onCheck.bind(this)} onExcludeAll={this.onExcludeAll.bind(this)} />
</div>
)
}
}