Mapear Objetos

Recuerden que para que no cargue las tareas dos veces agregar el condicional al componentDidMount asi:

`  componentDidMount() {
    if (!Object.keys(this.props.tareas).length) {
      this.props.traerTodas();
    }
  }`

1. Creamos una función que va a iterar las key del objeto tareas, son los ids de los usuarios y a cada llave que retorne un h2 y un div que llame a ponerTareas()

2. ponerTareas() recibe el usu_id, el id del usuario, recordemos que iteramos por las tareas del usuario y por cada usuario retorno todas las tareas del usuario junto un checkbox.

Conclusión: al componente Tareas, iteramos el objeto tareas que, por cada usuario le ponemos todas las tareas.

No sabía que se podía usar métodos como map y atributos como length sobre objetos, ahora se que ya existe Object.Keys, Gracias

Solo me carga una tarea por usuario, ¿a quién más le pasa?

No me salen los titulos y copie y pegue el codigo y nada ._.

Buena clase, se esta entendiendo mas

Excelente clase. 🙂

Excelente

Recordar que el valor que debe ir en el key es el que pasamos por el map en la arrow function

Excelente clase, mil gracias 😄

Genial todo el contenido es oro

Cabe destacar que un Map el cual es un mapa de un objeto, especialmente un diccionario de diccionarios, solo se va a mapear en el orden de inserción del objeto — el cual es aleatorio y no ordenado.

Un objeto Map puede iterar sobre sus elementos en orden de inserción. Un bucle for…of devolverá un array de [clave, valor] en cada iteración.

No me imprimia los titulos pero aqui mi solucion:

mostrarContenido = () => {
        const { tareas, cargando, error } = this.props;
        if(cargando) {
            return <Spinner />
        }
        if(error) {
            return <Fatal mensaje={error} />
        }
        var i = 0, j = 0;
        var titleArray = [];
        var completedArray = [];
        return Object.values(tareas).map((tarea, index) => {
            if(i === 0) {
                titleArray = [];
                completedArray = [];
            }
            if(i < 20) {
                i++;
                j = tarea['userId']
                titleArray.push(tarea['title']);
                completedArray.push(tarea['completed']);
                if(i === 20) {
                    i = 0;
                    return (
                        <div key={ tarea['userId'] }>
                            <h2>Usuario { tarea['userId'] }</h2>
                            <div className='contenedor_tareas'>
                                { titleArray.map((title, index) => (
                                    <div key={'Tarea ' + j + index}>
                                        <input type='checkbox' defaultChecked={ completedArray[index] }/>
                                        {title}
                                        <br/>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )
                }
            }
        })
    };

Excelente

Wow, super bien explicado

onerTareas = (usu_id) => {
        const { tareas } = this.props
        const por_usuario = {
            ...tareas[usu_id]
        }

        return Object.keys(por_usuario).map((tar_id) => (
            <div key={ tar_id }>
                <input type="checkbox" defaultChecked={  por_usuario[tar_id].completed} />
                {
                    por_usuario[tar_id].title
                }
            </div>            
        ))
    }