1

Estoy haciendo un mapping de un objeto en ReactJS a través de un consumidor, cuando intento hacer el mapeo me da el siguiente error:

Failed to compile

./src/js/views/files_view/files.js c:\Users\pc\Desktop\final\proyecto-final-2\src\js\views\files_view\files.js 16:8 error Missing "key" prop for element in iterator react/jsx-key ✖ 1 problem (1 error, 0 warnings)

Mi codigo para el mapeo es el siguiente:

<Context.Consumer>
            {({ store, actions }) => {
                return store.files.map((fil, i) => {
                    return (
                        <div className="container">
                            <div className="row">
                                <div className="col-sm-4" key={i}>
                                    <i className="fa fa-file-pdf fa-3x" /> <br />
                                    <small>Archivo: {fil.file_name}</small> <br />
                                    <small>Subido: {fil.created}</small>
                                </div>
                            </div>
                        </div>
                    );
                });
            }}
        </Context.Consumer>
4
  • 1
    Creo que el error puede darse por no tener definido la propiedad key en el contenedor del componente. Es decir, tu lo estás ubicando en un hijo del padre, y debe estar dentro del padre, es decir en tu div con clase container, quedando así <div className="container" key={i}> y podrías eliminarlo del otro div con clase col-sm-4 Commented el 18 jun. 2019 a las 18:59
  • @GermanAlzate gracias por la respuesta, he intentado poner el key dentro del container como dices pero me hace un container individual para cada archivo leido. lo que intento es que en el col-sm pueda ir el archivo y este alimente el col-sm.
    – Richi
    Commented el 18 jun. 2019 a las 19:02
  • 1
    Pero entonces el error que tienes ya sería diferente al de la pregunta, el error que te sale y que agregas en la pregunta se soluciona de la forma que te indico. La lógica de lo que estés programando viene a ser otro tema Commented el 18 jun. 2019 a las 19:04
  • @GermanAlzate mi error pude todo en el return, dbia haber puesto sol el col-sm en el return statement y aplicarle la key a ello. solucionado! :D
    – Richi
    Commented el 18 jun. 2019 a las 19:21

1 respuesta 1

0

te esta diciendo que le estas pasando un objeto tipo iterator no un iterable. y que no puede encontrar una llave para este.

pero no hay nada mejor que un ejemplo:

a = [1,2,3,4,5];
b= {a:1,b:2};

// !! es para hacer un cast a boolean
console.log(!!a[Symbol.iterator]())

// !! es para hacer un cast a boolean
console.log(!!b[Symbol.iterator]())

como ves el tipo iterator es solo para los los arreglos

una posible solucion es pasar tu arreglo a objeto ejemplo:

a = ["a","b","c"];
b = { ...a };

console.log(a);
console.log(b);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.