I am getting the linting error
Must use destructuring files assignment react/destructuring-assignment
For the code below
const showFiles = label => (files) =>
(
<>
{files.map(({ name }, index) => (
<Typography key={`${label}-file-${index}`}>{name}</Typography>
))}
</>
);
I tried changing it to this
const showFiles = label => ({ map }) =>
(
<>
{map(({ name }, index) => (
<Typography key={`${label}-file-${index}`}>{name}</Typography>
))}
</>
);
This makes the linting error go away but then the actual webpage has the following error.
TypeError: can't convert undefined to object
Is there a way around this linting error that I am not seeing? Do I have to use Array.prototypes.map or something?
The rest parameters and spread operators in ES6 would be a great use in this case. In the function showFiles, changing the files to ...files implies the function is expecting an array type argument, which improves readability and linting process.
For example
const showFiles = label => (...files) => {
return (
<>
{files.map(({ name }, index) => (
<Typography key={`${label}-file-${index}`}>{name}</Typography>
))}
</>
);
}
And add the spread operators when calling the function
return (
<>
{
showFiles('fileLabel')(...[
{name:'a'},
{name:'b'}
])
}
</>
);
I ended up changing it to
const showFiles = label => field => (
<>
{Array.prototype.map.call(field, ({ name }, index) => (
<Typography key={`${label}-file-${index}`}>{name}</Typography>
))}
</>
)
It works and the linting error is gone.
The map method want to iterate over each element of your array. So let your callback function be :
files.map(item => <Typography>{item.name}</Typography>)