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

Não atualiza a lista

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

Maria, Tudo bem? Me responde uma coisa por curiosidade, quando você remove algum, ele sai?

solução!

Opa eu ja resolvi :)

Maria compartilha sua solução aqui pra gente ficar sabendo o que aconteceu de fato por favor?

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software