noUnknownAttribute

JSX and TSX

Summary

Rule available since: v2.3.3
Diagnostic Category: lint/nursery/noUnknownAttribute
This rule doesn’t have a fix.
The default severity of this rule is information.
This rule belongs to the following domains:
- react
Sources:
- Same as react/no-unknown-property

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "nursery": {
5
        "noUnknownAttribute": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow unknown DOM properties.

In JSX, most DOM properties and attributes should be camelCased to be consistent with standard JavaScript style. This can be a possible source of error if you are used to writing plain HTML. Only data-* and aria-* attributes are allowed to use hyphens and lowercase letters in JSX.

Examples

Invalid

1
<div allowTransparency="true" />

code-block.jsx:1:6 lint/nursery/noUnknownAttribute ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ The property ‘allowTransparency’ is not a valid DOM attribute.
  
  > 1 │ <div allowTransparency=“true” />
      │      ^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ This property is not recognized as a valid HTML/DOM attribute or React prop.
  
  ℹ Check the spelling or consider using a valid data-* attribute for custom properties.

1
<div onclick={() => {}} />

code-block.jsx:1:6 lint/nursery/noUnknownAttribute ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Property ‘onclick’ is not a valid React prop name.
  
  > 1 │ <div onclick={() => {}} />
      │      ^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ React uses camelCased props, while HTML uses kebab-cased attributes.
  
  ℹ Use ‘onClick’ instead of ‘onclick’ for React components.

1
<div for="bar" />

code-block.jsx:1:6 lint/nursery/noUnknownAttribute ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ Property ‘for’ is not a valid React prop name.
  
  > 1 │ <div for=“bar” />
      │      ^^^^^^^^^
    2 │ 
  
  ℹ React uses camelCased props, while HTML uses kebab-cased attributes.
  
  ℹ Use ‘htmlFor’ instead of ‘for’ for React components.

Valid

1
<div className="foo" />

1
<div onClick={() => {}} />

1
<div htmlFor="bar" />

1
<div data-foo="bar" />

1
<div aria-label="Close" />

Options

`ignore`

An array of property and attribute names to ignore during validation.

1
{
2
  "noUnknownAttribute": {
3
    "options": {
4
      "ignore": ["custom-attribute", "non-standard-prop"]
5
    }
6
  }
7
}