# Eslint Plugin React > ## Pages - [Enforces consistent naming for boolean props (`react/boolean-prop-naming`)](rules-boolean-prop-naming.md): Allows you to enforce a consistent naming pattern for props which expect a boolean value. - [Disallow usage of `button` elements without an explicit `type` attribute (`react/button-has-type`)](rules-button-has-type.md): The default value of the`type`attribute for HTML`button`elements is`"submit"`. This is often not the desired beh... - [Enforce using `onChange` or `readonly` attribute when `checked` is used (`react/checked-requires-onchange-or-readonly`)](rules-checked-requires-onchange-or-readonly.md): This rule enforces`onChange`or`readonly`attribute for`checked`property of input elements. - [Enforce all defaultProps have a corresponding non-required PropType (`react/default-props-match-prop-types`)](rules-default-props-match-prop-types.md): This rule aims to ensure that any prop in`defaultProps`has a non-required type - [Enforce consistent usage of destructuring assignment of props, state, and context (`react/destructuring-assignment`)](rules-destructuring-assignment.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Disallow missing displayName in a React component definition (`react/display-name`)](rules-display-name.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow certain props on components (`react/forbid-component-props`)](rules-forbid-component-props.md): By default this rule prevents passing of [props that add lots of complexity](https://medium.com/brigade-engineering/d... - [Disallow certain props on DOM Nodes (`react/forbid-dom-props`)](rules-forbid-dom-props.md): This rule prevents passing of props to elements. This rule only applies to DOM Nodes (e.g.``) and not Compone... - [Disallow certain elements (`react/forbid-elements`)](rules-forbid-elements.md): You may want to forbid usage of certain elements in favor of others, (e.g. forbid all``and use``ins... - [Disallow using another component's propTypes (`react/forbid-foreign-prop-types`)](rules-forbid-foreign-prop-types.md): This rule forbids using another component's prop types unless they are explicitly imported/exported. This allows peop... - [Disallow certain propTypes (`react/forbid-prop-types`)](rules-forbid-prop-types.md): By default this rule prevents vague prop types with more specific alternatives available (`any`,`array`,`object`), ... - [Require all forwardRef components include a ref parameter (`react/forward-ref-uses-ref`)](rules-forward-ref-uses-ref.md): πŸ’‘ This rule is manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggest... - [Enforce a specific function type for function components (`react/function-component-definition`)](rules-function-component-definition.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Ensure destructuring and symmetric naming of useState hook value and setter variables (`react/hook-use-state`)](rules-hook-use-state.md): πŸ’‘ This rule is manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggest... - [Enforce sandbox attribute on iframe elements (`react/iframe-missing-sandbox`)](rules-iframe-missing-sandbox.md): The sandbox attribute enables an extra set of restrictions for the content in the iframe. Using sandbox attribute is ... - [Enforce boolean attributes notation in JSX (`react/jsx-boolean-value`)](rules-jsx-boolean-value.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Enforce or disallow spaces inside of curly braces in JSX attributes and expressions (`react/jsx-child-element-spacing`)](rules-jsx-child-element-spacing.md): Since React removes extraneous new lines between elements when possible, it is possible to end up with inline element... - [Enforce closing bracket location in JSX (`react/jsx-closing-bracket-location`)](rules-jsx-closing-bracket-location.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Enforce closing tag location for multiline JSX (`react/jsx-closing-tag-location`)](rules-jsx-closing-tag-location.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Disallow unnecessary JSX expressions when literals alone are sufficient or enforce JSX expressions on literals in JSX children or attributes (`react/jsx-curly-brace-presence`)](rules-jsx-curly-brace-presence.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Enforce consistent linebreaks in curly braces in JSX attributes and expressions (`react/jsx-curly-newline`)](rules-jsx-curly-newline.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Enforce or disallow spaces inside of curly braces in JSX attributes and expressions (`react/jsx-curly-spacing`)](rules-jsx-curly-spacing.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Enforce or disallow spaces around equal signs in JSX attributes (`react/jsx-equals-spacing`)](rules-jsx-equals-spacing.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Disallow file extensions that may contain JSX (`react/jsx-filename-extension`)](rules-jsx-filename-extension.md): Examples of **incorrect** code for this rule: - [Enforce proper position of the first property in JSX (`react/jsx-first-prop-new-line`)](rules-jsx-first-prop-new-line.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Enforce shorthand or standard form for React fragments (`react/jsx-fragments`)](rules-jsx-fragments.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Enforce event handler naming conventions in JSX (`react/jsx-handler-names`)](rules-jsx-handler-names.md): Ensures that any component or prop methods used to handle events are correctly prefixed. - [Enforce props indentation in JSX (`react/jsx-indent-props`)](rules-jsx-indent-props.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Enforce JSX indentation (`react/jsx-indent`)](rules-jsx-indent.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Disallow missing `key` props in iterators/collection literals (`react/jsx-key`)](rules-jsx-key.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Enforce JSX maximum depth (`react/jsx-max-depth`)](rules-jsx-max-depth.md): This option validates a specific depth for JSX. - [Enforce maximum of props on a single line in JSX (`react/jsx-max-props-per-line`)](rules-jsx-max-props-per-line.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Require or prevent a new line after jsx elements and expressions (`react/jsx-newline`)](rules-jsx-newline.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Disallow `.bind()` or arrow functions in JSX props (`react/jsx-no-bind`)](rules-jsx-no-bind.md): Using`bind`on a function or declaring a function in the render method of a component or the body of a functional co... - [Disallow comments from being inserted as text nodes (`react/jsx-no-comment-textnodes`)](rules-jsx-no-comment-textnodes.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallows JSX context provider values from taking values that will cause needless rerenders (`react/jsx-no-constructed-context-values`)](rules-jsx-no-constructed-context-values.md): This rule prevents non-stable values (i.e. object identities) from being used as a value for`Context.Provider`. - [Disallow duplicate properties in JSX (`react/jsx-no-duplicate-props`)](rules-jsx-no-duplicate-props.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow problematic leaked values from being rendered (`react/jsx-no-leaked-render`)](rules-jsx-no-leaked-render.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Disallow usage of string literals in JSX (`react/jsx-no-literals`)](rules-jsx-no-literals.md): There are a few scenarios where you want to avoid string literals in JSX. You may want to enforce consistency, reduce... - [Disallow usage of `javascript:` URLs (`react/jsx-no-script-url`)](rules-jsx-no-script-url.md): **In React 16.9** any URLs starting with`javascript:`[scheme](https://wiki.whatwg.org/wiki/URL_schemes#javascript:_... - [Disallow `target="_blank"` attribute without `rel="noreferrer"` (`react/jsx-no-target-blank`)](rules-jsx-no-target-blank.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow undeclared variables in JSX (`react/jsx-no-undef`)](rules-jsx-no-undef.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow unnecessary fragments (`react/jsx-no-useless-fragment`)](rules-jsx-no-useless-fragment.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Require one JSX element per line (`react/jsx-one-expression-per-line`)](rules-jsx-one-expression-per-line.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Enforce PascalCase for user-defined JSX components (`react/jsx-pascal-case`)](rules-jsx-pascal-case.md): Enforces coding style that user-defined JSX components are defined and referenced in PascalCase. - [Disallow multiple spaces between inline JSX props (`react/jsx-props-no-multi-spaces`)](rules-jsx-props-no-multi-spaces.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Disallow JSX prop spreading the same identifier multiple times (`react/jsx-props-no-spread-multi`)](rules-jsx-props-no-spread-multi.md): Enforces that any unique expression is only spread once. - [Disallow JSX prop spreading (`react/jsx-props-no-spreading`)](rules-jsx-props-no-spreading.md): Enforces that there is no spreading for any JSX attribute. This enhances readability of code by being more explicit a... - [Enforce defaultProps declarations alphabetical sorting (`react/jsx-sort-default-props`)](rules-jsx-sort-default-props.md): ❌ This rule is deprecated. It was replaced by [`react/sort-default-props`](sort-default-props.md). - [Enforce props alphabetical sorting (`react/jsx-sort-props`)](rules-jsx-sort-props.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Enforce spacing before closing bracket in JSX (`react/jsx-space-before-closing`)](rules-jsx-space-before-closing.md): ❌ This rule is deprecated. It was replaced by [`react/jsx-tag-spacing`](jsx-tag-spacing.md). - [Enforce whitespace in and around the JSX opening and closing brackets (`react/jsx-tag-spacing`)](rules-jsx-tag-spacing.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Disallow React to be incorrectly marked as unused (`react/jsx-uses-react`)](rules-jsx-uses-react.md): πŸ’ΌπŸš« This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable... - [Disallow variables used in JSX to be incorrectly marked as unused (`react/jsx-uses-vars`)](rules-jsx-uses-vars.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow missing parentheses around multiline JSX (`react/jsx-wrap-multilines`)](rules-jsx-wrap-multilines.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Disallow when this.state is accessed within setState (`react/no-access-state-in-setstate`)](rules-no-access-state-in-setstate.md): Usage of`this.state`inside`setState`calls might result in errors when two state calls are called in batch and thu... - [Disallow adjacent inline elements not separated by whitespace (`react/no-adjacent-inline-elements`)](rules-no-adjacent-inline-elements.md): Adjacent inline elements not separated by whitespace will bump up against each - [Disallow usage of Array index in keys (`react/no-array-index-key`)](rules-no-array-index-key.md): Warn if an element uses an Array index in its`key`. - [Lifecycle methods should be methods on the prototype, not class fields (`react/no-arrow-function-lifecycle`)](rules-no-arrow-function-lifecycle.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Disallow passing of children as props (`react/no-children-prop`)](rules-no-children-prop.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow when a DOM element is using both children and dangerouslySetInnerHTML (`react/no-danger-with-children`)](rules-no-danger-with-children.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow usage of dangerous JSX properties (`react/no-danger`)](rules-no-danger.md): Dangerous properties in React are those whose behavior is known to be a common source of application vulnerabilities.... - [Disallow usage of deprecated methods (`react/no-deprecated`)](rules-no-deprecated.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow usage of setState in componentDidMount (`react/no-did-mount-set-state`)](rules-no-did-mount-set-state.md): Updating the state after a component mount will trigger a second`render()`call and can lead to property/layout thra... - [Disallow usage of setState in componentDidUpdate (`react/no-did-update-set-state`)](rules-no-did-update-set-state.md): Updating the state after a component update will trigger a second`render()`call and can lead to property/layout thr... - [Disallow direct mutation of this.state (`react/no-direct-mutation-state`)](rules-no-direct-mutation-state.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow usage of findDOMNode (`react/no-find-dom-node`)](rules-no-find-dom-node.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow usage of invalid attributes (`react/no-invalid-html-attribute`)](rules-no-invalid-html-attribute.md): πŸ’‘ This rule is manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggest... - [Disallow usage of isMounted (`react/no-is-mounted`)](rules-no-is-mounted.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow multiple component definition per file (`react/no-multi-comp`)](rules-no-multi-comp.md): Declaring only one component per file improves readability and reusability of components. - [Enforce that namespaces are not used in React elements (`react/no-namespace`)](rules-no-namespace.md): Enforces the absence of a namespace in React elements, such as with`svg:circle`, as they are not supported in React. - [Disallow usage of referential-type variables as default param in functional component (`react/no-object-type-as-default-prop`)](rules-no-object-type-as-default-prop.md): Warns if in a functional component, an object type value (such as array/object literal/function/etc) is used as defau... - [Disallow usage of shouldComponentUpdate when extending React.PureComponent (`react/no-redundant-should-component-update`)](rules-no-redundant-should-component-update.md): Warns if you have`shouldComponentUpdate`defined when defining a component that extends React.PureComponent. - [Disallow usage of the return value of ReactDOM.render (`react/no-render-return-value`)](rules-no-render-return-value.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow usage of setState (`react/no-set-state`)](rules-no-set-state.md): When using an architecture that separates your application state from your UI components (e.g. Flux), it may be desir... - [Disallow using string references (`react/no-string-refs`)](rules-no-string-refs.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow `this` from being used in stateless functional components (`react/no-this-in-sfc`)](rules-no-this-in-sfc.md): In React, there are two styles of component. One is a class component:`class Foo extends React.Component {...}`, whi... - [Disallow common typos (`react/no-typos`)](rules-no-typos.md): Ensure no casing typos were made declaring static class properties and lifecycle methods. - [Disallow unescaped HTML entities from appearing in markup (`react/no-unescaped-entities`)](rules-no-unescaped-entities.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow usage of unknown DOM property (`react/no-unknown-property`)](rules-no-unknown-property.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow usage of unsafe lifecycle methods (`react/no-unsafe`)](rules-no-unsafe.md): 🚫 This rule is _disabled_ in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareab... - [Disallow creating unstable components inside components (`react/no-unstable-nested-components`)](rules-no-unstable-nested-components.md): Creating components inside components (nested components) will cause React to throw away the state of those nested co... - [Disallow declaring unused methods of component class (`react/no-unused-class-component-methods`)](rules-no-unused-class-component-methods.md): Warns you if you have defined a method or property but it is never being used anywhere. - [Disallow definitions of unused propTypes (`react/no-unused-prop-types`)](rules-no-unused-prop-types.md): Warns if a prop with a defined type isn't being used. - [Disallow definitions of unused state (`react/no-unused-state`)](rules-no-unused-state.md): Warns you if you have defined a property on the state, but it is not being used anywhere. - [Disallow usage of setState in componentWillUpdate (`react/no-will-update-set-state`)](rules-no-will-update-set-state.md): Updating the state during the componentWillUpdate step can lead to indeterminate component state and is not allowed. - [Enforce ES5 or ES6 class for React Components (`react/prefer-es6-class`)](rules-prefer-es6-class.md): React offers you two ways to create traditional components: using the ES5`create-react-class`module or the new ES6 ... - [Prefer exact proptype definitions (`react/prefer-exact-props`)](rules-prefer-exact-props.md): Recommends options to ensure only exact prop definitions are used when writing components. This recommends solutions ... - [Enforce that props are read-only (`react/prefer-read-only-props`)](rules-prefer-read-only-props.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Enforce stateless components to be written as a pure function (`react/prefer-stateless-function`)](rules-prefer-stateless-function.md): Stateless functional components are simpler than class based components and will benefit from future React performanc... - [Disallow missing props validation in a React component definition (`react/prop-types`)](rules-prop-types.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow missing React when using JSX (`react/react-in-jsx-scope`)](rules-react-in-jsx-scope.md): πŸ’ΌπŸš« This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable... - [Enforce a defaultProps definition for every prop that is not a required prop (`react/require-default-props`)](rules-require-default-props.md): This rule aims to ensure that any non-required prop types of a component has a - [Enforce React components to have a shouldComponentUpdate method (`react/require-optimization`)](rules-require-optimization.md): This rule prevents you from creating React components without declaring a`shouldComponentUpdate`method. - [Enforce ES5 or ES6 class for returning value in render function (`react/require-render-return`)](rules-require-render-return.md): πŸ’Ό This rule is enabled in the β˜‘οΈ`recommended`[config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-... - [Disallow extra closing tags for components without children (`react/self-closing-comp`)](rules-self-closing-comp.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Enforce component methods order (`react/sort-comp`)](rules-sort-comp.md): πŸ”§ This rule is automatically fixable using the [`sort-comp`transform](https://github.com/reactjs/react-codemod/blob/... - [Enforce defaultProps declarations alphabetical sorting (`react/sort-default-props`)](rules-sort-default-props.md): Some developers prefer to sort`defaultProps`declarations alphabetically to be able to find necessary declarations e... - [Enforce propTypes declarations alphabetical sorting (`react/sort-prop-types`)](rules-sort-prop-types.md): πŸ”§ This rule is automatically fixable by the [`--fix`CLI option](https://eslint.org/docs/latest/user-guide/command-li... - [Enforce class component state initialization style (`react/state-in-constructor`)](rules-state-in-constructor.md): This rule will enforce the state initialization style to be either in a constructor or with a class property. - [Enforces where React component static properties should be positioned (`react/static-property-placement`)](rules-static-property-placement.md): This rule allows you to enforce where`childContextTypes`,`contextTypes`,`contextType`,`defaultProps`,`displayName`, - [Enforce style prop value is an object (`react/style-prop-object`)](rules-style-prop-object.md): Require that the value of the prop`style`be an object or a variable that is - [Disallow void DOM elements (e.g. ``, `
`) from receiving children (`react/void-dom-elements-no-children`)](rules-void-dom-elements-no-children.md): There are some HTML elements that are only self-closing (e.g.`img`,`br`,`hr`). These are collectively known as voi...