Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Dúvida com arrays

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)}>&times;</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>
        )
    }
}
2 respostas

Oi Maria, vi no fórum que você já tinha outra dúvida, que parece a evolução dessa. Já corrigiu essa?

solução!

Não consegui resolver ainda, toda vez que clico no primeiro item da lista, ele remove o ultimo, tanto para o remover item quanto para checar o item da lista. Tenho o projeto no git hub:

https://github.com/wellingtonngallo/todolist-react