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

Question

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?

Why don't you disable the lint rule for this function? Destructuring here reduces readability. What are you mapping? What does this function take? — k.tten
– k.tten, Commented Mar 22, 2022 at 19:16
Could you share your eslintrc? Take a look at the rule here github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/… — axtck
– axtck, Commented Mar 22, 2022 at 19:16
it's a shared project and I don't have a say in the enforced linting rules. If there isn't a way around it I will try to figure out how to rearrange my code. — Lianne
– Lianne, Commented Mar 22, 2022 at 19:58

Anthony C · Accepted Answer · 2022-03-22 20:55:48Z

1

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

answered Mar 22, 2022 at 20:55

Anthony C

2,1572 gold badges17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Niyi Aromokeye · Accepted Answer · 2022-03-22 19:20:24Z

0

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

answered Mar 22, 2022 at 19:20

Niyi Aromokeye

4505 silver badges10 bronze badges

1 Comment

Lianne Over a year ago

I am doing that in my original code. I actually only unpacked name afterward hoping that that is the issue the lint error was pointing out but no such luck. It is complaining about files not being deconstructed. I know what map does. I only tried the second method to see if it made the lint error go away and hoped against hope that it would unpack it as the map function attached to the array prototype but doesn't seem to be the case.

Lianne · Accepted Answer · 2022-03-22 21:18:33Z

0

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.

answered Mar 22, 2022 at 21:18

Lianne

1109 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related