1 votes

Missing prop Key

I am mapping an object in ReactJS through a consumer, when I try to do the mapping I get the following 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)

My code for the mapping is as follows:

<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>

1 votes

I think that the error may be due to not having defined the property key in the component container. That is, you are placing it in a child of the parent, and it must be inside the parent, that is to say in your div with class container The following is the result <div className="container" key={i}> and you could remove it from the other div with class col-sm-4

0 votes

@GermanAlzate thanks for the answer, I have tried to put the key inside the container as you say but it makes me an individual container for each file read. what I am trying is that in the col-sm can go the file and this feeds the col-sm.

1 votes

But then the error that you have would be different from the one in the question, the error that you get and that you add in the question is solved in the way that I indicate you. The logic of what you are programming is another matter.

0voto

Bryro Points 4241

is telling you that you are passing it an object of type iterator not a iterable . and that he cannot find a key for this one.

but there is nothing better than a example:

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]())

as you see the type iterator is only for the arreglos

a possible solution is to pass your arreglo a objeto example:

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

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

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X