Recibo el error de pelusa
Must use destructuring files assignment react/destructuring-assignmentPara el código de abajo
const showFiles = label => (files) => ( <> {files.map(({ name }, index) => ( <Typography key={`${label}-file-${index}`}>{name}</Typography> ))} </> );Traté de cambiarlo a esto
const showFiles = label => ({ map }) => ( <> {map(({ name }, index) => ( <Typography key={`${label}-file-${index}`}>{name}</Typography> ))} </> );Esto hace que desaparezca el error de pelusa, pero luego la página web real tiene el siguiente error.
TypeError: can't convert undefined to object ¿Hay alguna forma de evitar este error de pelusa que no estoy viendo? ¿Tengo que usar Array.prototypes.map o algo así?
Los parámetros de rest y los operadores de spread en ES6 serían de gran utilidad en este caso. En la función showFiles , cambiar los files a ...files implica que la función espera un argumento de tipo matriz, lo que mejora la legibilidad y el proceso de deslinzado.
Por ejemplo
const showFiles = label => (...files) => { return ( <> {files.map(({ name }, index) => ( <Typography key={`${label}-file-${index}`}>{name}</Typography> ))} </> ); } Y agregue los operadores de spread al llamar a la función
return ( <> { showFiles('fileLabel')(...[ {name:'a'}, {name:'b'} ]) } </> );Terminé cambiándolo a
const showFiles = label => field => ( <> {Array.prototype.map.call(field, ({ name }, index) => ( <Typography key={`${label}-file-${index}`}>{name}</Typography> ))} </> )Funciona y el error de pelusa se ha ido.
El método del map quiere iterar sobre cada elemento de su matriz. Así que deja que tu función de devolución de llamada sea:
files.map(item => <Typography>{item.name}</Typography>)