[TYPESCRIPT]: react/require-default-props does not work correctly with my .eslintrc configuration

Question

I'm setting the default props in typescript in this way

type Props = {
  message?: string,
  disableElevation?: boolean,
};

const BoxError = ({ message = 'Oops! Something went wrong!', disableElevation = false }: Props) => {

  return (
    <div>mybox error</div>
  )
}

but I get always the error react/require-default-props

The .eslintrc used is this:

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": [
      "./tsconfig.json"
    ]
  },
  "plugins": [],
  "extends": [
    "airbnb-typescript",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "env": {
    "browser": true,
    "node": true,
    "jquery": true,
    "mocha": true
  },
  "globals": {
    "Routing": true
  },
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn",
    "react-redux/connect-prefer-named-arguments": 0,
    "no-console": 2,
    "no-continue": "off",
    "no-undef": 0,
    "react/prefer-stateless-function": 2,
    "react/jsx-filename-extension": 0,
    "func-names": 0,
    "no-underscore-dangle": 0,
    "no-param-reassign": [ "error", { "props": false }],
    "semi": [2, "never"],
    "@typescript-eslint/semi": "off",
    "max-len": ["error", 200, 2, {
      "ignoreUrls": true,
      "ignoreComments": false,
      "ignoreRegExpLiterals": true,
      "ignoreStrings": true,
      "ignoreTemplateLiterals": true
    }],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "curly":["error","all"],
    "jsx-a11y/click-events-have-key-events": 0,
    "jsx-a11y/no-noninteractive-element-interactions": 0,
    "jsx-a11y/label-has-for": 0,
    "react/jsx-closing-tag-location": 0
  },
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "webpack.common.js"
      }
    }
  },
}

What I wrong?

Answer 1

In the "rules" section you should add this key-value pair:

"react/require-default-props": 0

'0' means 'off', '1' means 'warn' and '2' means 'error'.

Check this documentation for reference:

https://docs.roguewave.com/en/klocwork/2021/js.react.require.default.props

Answer 2

Try next example:

type Props = {
  message?: string,
  disableElevation?: boolean,
};

const BoxError = ({ message = 'Oops! Something went wrong!', disableElevation = false }: Props) => {

  return (
    <div>mybox error</div>
  )
}

BoxError.defaultProps = {
  message: '',
  disableElevation: false,
}