Why is this an issue?

React components often render HTML elements, and developers can pass various props (properties) to these elements. However, React has its own set of supported properties and attributes, and it’s essential to avoid using unknown or invalid properties when working with such elements to prevent unexpected behavior at runtime.

The rule reports any instances where you are using a property or attribute that is not recognized by React or the HTML element you are rendering.

How to fix it

Replace any unknown property or attribute with a known one, or add it to the list of exceptions.

Code examples

Noncompliant code example

class Welcome extends React.Component {
  render() {
    return <div class="hello">Hello, World!</div>; // Noncompliant: 'class' is a reserved keyword in JavaScript
  }
}

Compliant solution

class Welcome extends React.Component {
  render() {
    return <div className="hello">Hello, World!</div>;
  }
}

Noncompliant code example

const Image = <img source={myImage} />; // Noncompliant: The 'img' tag does not recognize any 'source' attribute

Compliant solution

const Image = <img src={myImage} />;

Exceptions

No issue is raised for the following framework-specific JSX properties when the corresponding integration is used:

Other unknown properties are still reported.

import styled from 'styled-components';

const Button = () => (
  <button css={{ color: 'red' }}>Save</button>
);

import { ImageResponse } from 'next/og';

const image = <div tw="flex items-center">Hello</div>;

Resources

Documentation