jsx-no-undef.md

Disallow undeclared variables in JSX (react/jsx-no-undef)

💼 This rule is enabled in the ☑️ recommended config.

This rule helps locate potential ReferenceErrors resulting from misspellings or missing components.

Rule Details

Examples of incorrect code for this rule:

<Hello name="John" />;

// will ignore Text in the global scope and warn
var Hello = React.createClass({
  render: function() {
    return <Text>Hello</Text>;
  }
});
module.exports = Hello;

Examples of correct code for this rule:

var Hello = require('./Hello');

<Hello name="John" />;

Rule Options

...
"react/jsx-no-undef": [<enabled>, { "allowGlobals": <boolean> }]
...

allowGlobals

When true the rule will consider the global scope when checking for defined Components.

Examples of correct code for this rule, when "allowGlobals" is true:

var Text = require('./Text');
var Hello = React.createClass({
  render: function() {
    return <Text>Hello</Text>;
  }
});
module.exports = Hello;

When Not To Use It

It's recommended to avoid this rule if your project:

1. does not use JSX
2. uses TypeScript, which automatically enables better checks than ESLint no-undef rules
3. uses typescript-eslint with no-undef