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>
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 clasecontainer
, quedando así<div className="container" key={i}>
y podrías eliminarlo del otro div con clasecol-sm-4