Eslint error went passing array into function and using map on it-CodePudding

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?

CodePudding user response：

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'}
        ])
      }
      
    </>
  );

CodePudding user response：

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

CodePudding user response：

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.