Javascript: Expected 'this' to be used by class method 'render'

[MyGuySi]

Hi, from what I've read this has already been fixed in the eslint-config-airbnb package but I'm getting this error. I've probably set up my .eslintrc file incorrectly or something so if anyone could point out my mistake I'd really appreciate it.

.eslintrc

{
    "extends": "airbnb/base",
    "parser": "babel-eslint",
    "parserOptions": {
        "sourceType": "module",
        "allowImportExportEverywhere": false,
        "ecmaFeatures": {
          "jsx": true,
        },
    },
    "plugins": [
        "react",
    ],
    "env": {
        "node": true,
        "jasmine": true,
    },
    "rules": {
        "id-length": 0,
        "indent": [1, 4],
        "jsx-quotes": 1,
        "no-console": 0,
        "no-unused-vars": [1, {"vars": "local", "args": "none"}],
        "react/forbid-prop-types": 1,
        "react/jsx-boolean-value": 1,
        "react/jsx-closing-bracket-location": 1,
        "react/jsx-curly-spacing": 1,
        "react/jsx-indent-props": 1,
        "react/jsx-key": 1,
        "react/jsx-max-props-per-line": 1,
        "react/jsx-no-duplicate-props": 1,
        "react/jsx-no-undef": 1,
        "react/jsx-sort-props": 1,
        "react/jsx-uses-react": 1,
        "react/jsx-uses-vars": 1,
        "react/no-danger": 1,
        "react/no-did-mount-set-state": 1,
        "react/no-did-update-set-state": 1,
        "react/no-direct-mutation-state": 1,
        "react/no-multi-comp": 1,
        "react/no-set-state": 1,
        "react/no-unknown-property": 1,
        "react/prefer-es6-class": 1,
        "react/prop-types": 1,
        "react/react-in-jsx-scope": 1,
        "react/require-extension": 1,
        "react/self-closing-comp": 1,
        "react/sort-comp": 1,
        "react/sort-prop-types": 1,
        "react/wrap-multilines": 1,
        "strict": 0,
    },
}

package.json

{
  "name": "KHTestApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "@exponent/ex-navigation": "^2.1.5",
    "@exponent/vector-icons": "^2.0.3",
    "babel-eslint": "6",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-react-native-stage-0": "^1.0.1",
    "exponent": "^12.0.0-rc.5",
    "react": "15.4.1",
    "react-native": "0.39.0",
    "react-native-code-push": "latest",
    "react-native-vector-icons": "^3.0.0"
  },
  "devDependencies": {
    "babel-jest": "17.0.2",
    "babel-preset-react-native": "1.9.0",
    "eslint": "^3.11.1",
    "eslint-config-airbnb": "^13.0.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^2.2.3",
    "eslint-plugin-react": "^6.8.0",
    "jest": "17.0.3",
    "react-test-renderer": "15.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

[SimenB]

What does your component look like?

[MyGuySi]

I have it in a few but this is a very simple component that is receiving the error:

import React, { Component } from 'react';

import KHNavigator from './navigation/KHNavigator';

export default class App extends Component {
    render() {
        return (
            <KHNavigator />
        );
    }
}

Seems pointless having it just return another component but it's just a placeholder, there will be more login in here eventually.

[SimenB]

It's probably because your component could be an SFC, it doesn't need to be a class

[MyGuySi]

Shouldn't eslint-config-airbnb block this error for lifecycle methods?

[ljharb]

@MyGuySi First, airbnb/base is legacy - you want eslint-config-airbnb-base for that - but second, if you're using react, you need to use airbnb - ie, the top-level one.

[ljharb]

Separately, that component absolutely should be an SFC, and our main (react-compatible) config will enforce that.

[ljharb]

Your eslintrc should just be:

{
    "extends": "airbnb",
    "parser": "babel-eslint",
    "env": {
        "node": true,
        "jasmine": true,
    },
    "rules": {
        "id-length": 0,
        "indent": [1, 4],
        "no-console": 0,
        "no-unused-vars": [1, {"vars": "local", "args": "none"}],
        "strict": 0,
    },
}

[MyGuySi]

@ljharb That's great, thank you for all of that :)

I'm still a noob so thank you all for helping out. I'll try what you've suggested after the weekend

[ljharb]

np, please reopen if it's still a problem