0
votes

've setup eslint & eslint-plugin-react.

When I run ESLint, the linter returns no-unused-vars errors for each React component.

I'm assuming it's not recognizing that I'm using JSX or React syntax. Any ideas? enter image description here

this my code--

3
Always paste real code, never images of code.connexo

3 Answers

3
votes

In your codeblock

users.forEach((user, index) => { ... }) 
                     ^^^^^

you never use the parameter index, rendering it useless. That why ESLint complains - rightfully.

Instead go

users.forEach((user) => { ... }) 
1
votes

As another answer already explains, no-unused-vars rule triggers linter error because index parameter isn't in use. It can be omitted:

users.forEach(user => {
  /* ... */
});

If for some reason a parameter is temporarily not in use but is expected to be used later, or it's needed for proper function arity (this is not the case for forEach), it can be marked as unused (conventionally, underscored parameters treated as such):

users.forEach((user, _index) => {
  /* ... */
});

Expected parentheses around arrow function argument linter error means that it was configured to enforce optional parentheses in arrow functions with arrow-parens rule. This can be changed by either disabling this rule or adding parentheses:

users.forEach((user) => {
  /* ... */
});

The latter option may be preferred because enforced arrow parentheses are more consistent.

0
votes
 handleSelectAll = () => {
    const { users } = this.props.users
    this.setState((prevState) => {
      const newState = { ...prevState }
      newState.selects = []
      users.forEach(user => {
        newState.selects.push(!prevState.selectedAll)
      });
      newState.selectedAll = !prevState.selectedAll
      return newState
    })
  }

"message: 'Expected parentheses around arrow function argument. (arrow-parens)"