Eslint-plugin-react: Fatal error when using a callback for setting state

[kuroisuna]

When trying to set the state using a callback, I get a fatal error:

this.setState(({ items }) => ({
  items: sortBy([...items, resolvedItem], 'order')
}));
// Error while running ESLint: Cannot read property 'properties' of undefined.

If I use objects to feed the state, then everything works without issues:

this.setState({
  items: sortBy([...this.state.items, resolvedItem], 'order')
});

It seems like the cause is that I'm extending the component from a global helper:

export default class WellnessScore extends WidgetComponent {
  ...

If I change that to extends Component, ESLint runs again. 🤔

---

This is my .eslintrc.json with "eslint": "^4.5.0",:

{
  "extends": "airbnb",
  "env": {
    "browser": true
  },
  "rules": {
    "react/jsx-no-undef": ["error", { "allowGlobals": true }]
  },
}

Thanks a lot for this awesome project 🤩This seem like a problem with our code, but I appreciate any clue you guys can give us 🙏

[ljharb]

I'm confused; is WellnessScore a React component?

[kuroisuna]

@ljharb oh, sorry, yes it is, and WidgetComponent extends React.Component.

You can also replicate this error if you try to use setState with a callback in a class that doesn't extends React.Component at all:

export default class WellnessScore {

WidgetComponent is a global variable.

[ljharb]

so, setting aside that using inheritance in components is considered an antipattern, the react eslint plugin can't possibly know that WidgetComponent is a react component. You'd have to annotate each component with a jsdoc comment to indicate that it extends React.Component for detection to work properly.

However, the crash on "not a component" is a real bug that needs fixing.

[jzabala]

Not sure if I am testing this properly but I don't see errors with versions:

"eslint": "^7.4.0",
"eslint-plugin-react": "^7.20.3"