Boa tarde, o esquema é o seguinte, criei um array e estou atribuindo valores a ele, porém quando vou pegar this.props.items e algum valor que contém dentro, não consigo, pois ele me retorna da seguinte forma: http://ap.imagensbrasil.org/image/8bnI5j
Ele coloca a posição antes dos valores, queria que viesse os valores direto pra eu poder manipular. Segue meu código:
import React, {Component} from 'react';
import Header from './Header';
class List extends Component{
onCheck(){
var index = this.props.items.index;
this.props.onCheck(index);
}
onExclude(){
var index = this.props.items.index;
this.props.onExclude(index);
}
render(){
console.log(this.props.items);
var todoClass = this.props.items.check ? "check" : "uncheck";
return(
<li className="list-group-item">
<div className={todoClass}>
<span className="glyphicon glyphicon-ok icon" aria-hidden="true" onClick={this.onCheck.bind(this)}></span>
<button type="button" className="close" onClick={this.onExclude.bind(this)}>×</button>
</div>
</li>
)
}
}
class Form extends Component{
onSubmit(e){
e.preventDefault();
var newItemValue = this.itemList.value;
if(newItemValue){
this.props.onAdd({newItemValue});
}
}
render(){
return(
<form onSubmit={this.onSubmit.bind(this)} className="form-inline">
<input type="text" className="itemList" placeholder="New Item in List" ref={input => this.itemList = input} />
<button type="submit" className="btn btn-primary">Add</button>
</form>
)
}
}
export default class ListTodo extends Component{
constructor(){
super();
this.state = {itemsTodo: []};
}
onAdd(itemList){
this.state.itemsTodo.unshift({
index: this.state.itemsTodo.length+1, // Pega o tamanho da lista e adiciona mais 1
value: itemList.newItemValue, // 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.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){
let 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});
}
render(){
return(
<div id="main">
<Header />
<List items={this.state.itemsTodo} onExclude={this.onExclude} onCheck={this.onCheck} />
<Form onAdd={this.onAdd.bind(this)} />
</div>
)
}
}