### Example Configuration for react/static-property-placement

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/static-property-placement.md

This example shows a complex configuration where different static properties can be assigned different placement rules.

```json
"react/static-property-placement": ["warn", "property assignment", {
  childContextTypes: "static getter",
  contextTypes: "static public field",
  contextType: "static public field",
  displayName: "static public field",
}]
```

--------------------------------

### Install ESLint and React Plugin

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md

Install ESLint and the React plugin as development dependencies. This is a prerequisite for using the plugin.

```sh
npm install eslint eslint-plugin-react --save-dev
```

--------------------------------

### Another incorrect code example for 'multiline' configuration

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md

This example demonstrates an incorrect placement for the 'multiline' configuration when dealing with object literals.

```jsx
<Hello foo={{
}}
/>
```

--------------------------------

### Correct code examples for 'multiline' configuration

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md

When configured with 'multiline', the first property should be on a new line if the tag spans multiple lines. These examples demonstrate correct placement.

```jsx
<Hello personal={true} />

<Hello
    personal={true}
    foo="bar"
/>
```

--------------------------------

### Correct code examples for 'always' configuration

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md

When configured with 'always', the first property must be on a new line. These examples demonstrate correct placement.

```jsx
<Hello
    personal />

<Hello
    personal
/>
```

--------------------------------

### Allow explicit prop passing (Correct Examples)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md

These examples demonstrate correct usage by explicitly defining props, improving code clarity.

```jsx
const {src, alt} = props;
const {one_prop, two_prop} = otherProps;
<MyCustomComponent one_prop={one_prop} two_prop={two_prop} />
<img src={src} alt={alt} />
```

--------------------------------

### Correct ES6 class example

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-es6-class.md

This is an example of a correctly written ES6 class component.

```jsx
class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}
```

--------------------------------

### Correct code examples for 'multiline-multiprop' configuration

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md

When configured with 'multiline-multiprop', the first property should be on a new line if the tag spans multiple lines and there are multiple properties. These examples demonstrate correct placement.

```jsx
<Hello foo={{
}}
/>

<Hello
    foo={{
    }}
    bar
/>
```

--------------------------------

### Correct JSX Depth Examples with Max Depth Configuration

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-max-depth.md

These examples show correct JSX structures that adhere to the specified 'max' depth configurations.

```jsx
// [2, { "max": 1 }]
<App>
  <Hello />
</App>

```

```jsx
// [2,{ "max": 2 }]
<App>
  <Foo>
    <Bar />
  </Foo>
</App>

```

```jsx
// [2, { "max": 3 }]
<App>
  <Foo>
    <Bar>
      <Baz />
    </Bar>
  </Foo>
</App>

```

--------------------------------

### Configuration Example

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-equals-spacing.md

Configure the rule to enforce spaces around the equal sign in JSX attributes.

```json
"react/jsx-equals-spacing": [2, "always"]
```

--------------------------------

### PropTypes example

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-exact-props.md

Example of defining PropTypes for a React component. This pattern can lead to unexpected extra props being passed.

```jsx
class Foo extends React.Component {
  render() {
    return <p>{this.props.bar}</p>;
  }
}

Foo.propTypes = {
  bar: PropTypes.string
};
```

--------------------------------

### Use React.createPortal

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md

Example of using `React.createPortal`, a valid alternative to deprecated methods for rendering components.

```jsx
ReactDOM.createPortal(child, container);
```

--------------------------------

### Correct: createReactClass With Decorator and PureRenderMixin

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-optimization.md

This example shows how to use a decorator with `PureRenderMixin` for `createReactClass` components.

```javascript
@reactMixin.decorate(PureRenderMixin)
createReactClass({

});
```

--------------------------------

### Allowing Leading Underscore Components

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md

Examples of correct code when `allowLeadingUnderscore` is true, permitting component names that start with an underscore. Note that this does not affect visibility or accessibility.

```jsx
<_AllowedComponent />
```

```jsx
<_AllowedComponent>
  <div />
</_AllowedComponent>
```

--------------------------------

### Incorrect code example for 'multiline' configuration

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md

When configured with 'multiline', the first property should be on a new line only if the tag spans multiple lines. This example shows incorrect placement.

```jsx
<Hello personal
    prop />
```

--------------------------------

### Example React Component

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-comp.md

This example demonstrates a basic React class component. The sort-comp rule would enforce a specific order for properties like `props` and `_someElem`, and methods like `onClick` and `render`.

```javascript
class Hello extends React.Component<any, Props, void> {
  props: Props;
  _someElem: bool;
  onClick() { this._someElem = true; }
  render() {
    return <div>Hello</div>;
  }
}
```

--------------------------------

### Incorrect code examples for 'always' configuration

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md

When configured with 'always', the first property should be on a new line. These examples show incorrect placement.

```jsx
<Hello personal={true} />

<Hello personal={true}
    foo="bar"
/>
```

--------------------------------

### Use createRoot for React 18+

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md

Example of using `createRoot` from `react-dom/client` for managing React 18+ applications.

```jsx
import { createRoot } from 'react-dom/client';
const root = createRoot(container);
root.unmount();
```

--------------------------------

### Flow types example

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-exact-props.md

Example of defining props using Flow types. This basic definition also allows for extra props.

```jsx
class Foo extends React.Component {
  props: {
    bar: string
  }

  render() {
    return <p>{this.props.bar}</p>;
  }
}
```

--------------------------------

### Incorrect code example for 'multiline-multiprop' configuration

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-first-prop-new-line.md

When configured with 'multiline-multiprop', the first property should be on a new line if the tag spans multiple lines and there are multiple properties. This example shows incorrect placement.

```jsx
<Hello foo={{
    }}
    bar />
```

--------------------------------

### Correct: createReactClass With PureRenderMixin

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-optimization.md

This example demonstrates using `PureRenderMixin` with `createReactClass` to automatically handle `shouldComponentUpdate`.

```javascript
createReactClass({
  mixins: [PureRenderMixin]
});
```

--------------------------------

### Correct JSX with target="_blank"

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-target-blank.md

These examples demonstrate correct usage of target="_blank" by including rel="noopener noreferrer" or by linking to relative paths. The last example shows a Link component without any props.

```jsx
var Hello = <Link target="_blank" rel="noopener noreferrer" to="https://example.com"></Link>
```

```jsx
var Hello = <Link target="_blank" to="relative/path/in/the/host"></Link>
```

```jsx
var Hello = <Link target="_blank" to="/absolute/path/in/the/host"></Link>
```

```jsx
var Hello = <Link />
```

--------------------------------

### Incorrect JSX Depth Examples with Max Depth Configuration

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-max-depth.md

These examples demonstrate incorrect JSX structures for different 'max' depth configurations, highlighting violations.

```jsx
// [2, { "max": 1 }]
<App>
  <Foo>
    <Bar />
  </Foo>
</App>

```

```jsx
// [2, { "max": 1 }]
const foobar = <Foo><Bar /></Foo>;
<App>
  {foobar}
</App>

```

```jsx
// [2, { "max": 2 }]
<App>
  <Foo>
    <Bar>
      <Baz />
    </Bar>
  </Foo>
</App>

```

--------------------------------

### Callbacks Last Option Example

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md

When `callbacksLast` is true, propTypes for props beginning with 'on' must be listed after all other props. This example demonstrates the correct ordering.

```jsx
var Component = createReactClass({
  propTypes: {
    a: PropTypes.number,
    z: PropTypes.string,
    onBar: PropTypes.func,
    onFoo: PropTypes.func,
  },
...
});
```

--------------------------------

### Configure 'extensions' option

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md

Customize the set of allowed file extensions, for example, to permit both '.js' and '.jsx'.

```js
"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
}
```

--------------------------------

### Configuring forbidden entities

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unescaped-entities.md

This example shows how to configure the rule to forbid specific entities and provide custom alternatives.

```js
...
"react/no-unescaped-entities": [<enabled>, { "forbid": Array<string> }]
...
```

```js
"react/no-unescaped-entities": ["error", {"forbid": [">", "}"]}],
```

```js
"react/no-unescaped-entities": ["error", {"forbid": [{
  char: ">",
  alternatives: ['&gt;']
}, {
  char: "}",
  alternatives: ['&#125;']
}]}]
```

--------------------------------

### Use UNSAFE_ lifecycles

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md

Example of using the `UNSAFE_` prefixed lifecycle methods as replacements for deprecated ones.

```jsx
import { PropTypes } from 'prop-types';

UNSAFE_componentWillMount() { }
UNSAFE_componentWillReceiveProps() { }
UNSAFE_componentWillUpdate() { }
```

--------------------------------

### Exceptions for specific components

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md

This example demonstrates correct usage with exceptions defined for 'Image' and 'img' components, allowing prop spreading.

```jsx
const {src, alt} = props;
<Image {...props} />
<img {...props} />
```

--------------------------------

### Component with defaultProps

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-default-props.md

Example of a component correctly using `defaultProps` for a non-required prop.

```jsx
const HelloWorld = ({ name }) => (
  <h1>Hello, {name.first} {name.last}!</h1>
);

HelloWorld.propTypes = {
  name: PropTypes.shape({
    first: PropTypes.string,
    last: PropTypes.string,
  })
};

HelloWorld.defaultProps = {
  name: 'john'
};

// Logs:
// Invalid prop `name` of type `string` supplied to `HelloWorld`, expected `object`.
ReactDOM.render(<HelloWorld />, document.getElementById('app'));
```

--------------------------------

### Correct: createReactClass With shouldComponentUpdate

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-optimization.md

Using `createReactClass`, this example shows the correct way to define `shouldComponentUpdate`.

```javascript
createReactClass({
  shouldComponentUpdate: function () {
    return false;
  }
});
```

--------------------------------

### Incorrect: Default prop for non-existent prop in a class component

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/default-props-match-prop-types.md

This class component example defines a default prop 'baz' without a corresponding propType, similar to the React.createClass example.

```jsx
class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.foo} {this.props.bar}</h1>
    );
  }

  static propTypes = {
    foo: React.PropTypes.string,
    bar: React.PropTypes.string.isRequired
  };

  static defaultProps = {
    baz: "baz"
  };
}
```

--------------------------------

### Correct Code Examples for 'never' Configuration

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-brace-presence.md

These examples demonstrate code that is considered correct even when the rule is configured to 'never' enforce curly braces. This typically occurs when the content requires escaping or special handling, such as non-breaking spaces, comments, or CSS within style tags.

```jsx
<Color text={"\u00a0"} />
```

```jsx
<App>{"Hello \u00b7 world"}</App>;
```

```jsx
<style type="text/css">{'.main { margin-top: 0; }'}</style>;
```

```jsx
/**
 * there's no way to inject a whitespace into jsx without a container so this
 * will always be allowed.
 */
<App>{' '}</App>
```

```jsx
<App>{'     '}</App>
```

```jsx
<App>{/* comment */ <Bpp />}</App> // the comment makes the container necessary
```

--------------------------------

### Correct JSX Indentation Examples

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent.md

Examples of correctly indented JSX code according to various configurations of the react/jsx-indent rule. These illustrate valid indentation for elements, attributes, and logical expressions.

```jsx
// 2 spaces indentation
// [2, 2]
<App>
  <Hello />
</App>

// tab indentation
// [2, 'tab']
<App>
  <Hello />
</App>

// no indentation
// [2, 0]
<App>
<Hello />
</App>

// [2, 2, {checkAttributes: false}]
<App render={
  <Hello render={
    (bar) => <div>hi</div>
}
  />
  }>
</App>

// [2, 2, {indentLogicalExpressions: true}]
<App>
  {condition && (
    <Hello />
  )}
</App>
```

--------------------------------

### Correct JSX Props Indentation Examples

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent-props.md

Examples of correctly indented JSX props for various configurations, including 2 spaces, tab indentation, no indentation, alignment with the first prop, and ternary operator handling.

```jsx
// 2 spaces indentation
// [2, 2]
<Hello
  firstName="John"
/>

<Hello
  firstName="John" />

// tab indentation
// [2, 'tab']
<Hello
  firstName="John"
/>

// no indentation
// [2, 0]
<Hello
firstName="John"
/>

// aligned with first prop
// [2, 'first']
<Hello
  firstName="John"
  lastName="Doe"
/>

<Hello
       firstName="John"
       lastName="Doe"
/>

<Hello firstName="Jane"
       lastName="Doe" />

// indent level increase on ternary operator (default setting)
// [2, 2]
? <Hello
    firstName="John"
    lastName="Doe"
  />

// no indent level increase on ternary operator
// [2, { indentMode: 2, ignoreTernaryOperator: true} ]
? <Hello
  firstName="John"
  lastName="Doe"
/>
```

--------------------------------

### Allowing All Caps Components

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md

Examples of correct code when the `allowAllCaps` option is set to true, permitting component names in all caps.

```jsx
<ALLOWED />
```

```jsx
<TEST_COMPONENT />
```

--------------------------------

### Rule Configuration: Component and HTML Tags

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/self-closing-comp.md

Example configuration for the react/self-closing-comp rule, enabling self-closing for both custom components and HTML tags.

```javascript
...
"react/self-closing-comp": ["error", {
  "component": true,
  "html": true
}]
...
```

--------------------------------

### Incorrect: Multiple Components in a File

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md

This example shows incorrect usage where multiple components are defined within the same file, violating the rule.

```jsx
var Hello = createReactClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

var HelloJohn = createReactClass({
  render: function() {
    return <Hello name="John" />;
  }
});
```

--------------------------------

### Chaining Flat Configs for Customization

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md

Demonstrates how to achieve custom configurations by chaining multiple flat config objects. This approach allows for granular control over settings like file inclusions and global variables.

```javascript
const reactPlugin = require('eslint-plugin-react');
const globals = require('globals');

module.exports = [
  …
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    ...reactPlugin.configs.flat.recommended,
  },
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    languageOptions: {
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  …
];
```

--------------------------------

### Correct JSX props order

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md

This example demonstrates correctly sorted props, including a spread attribute.

```jsx
<Hello firstName="John" lastName="Smith" />
```

```jsx
<Hello tel={5555555} {...this.props} firstName="John" lastName="Smith" />
```

--------------------------------

### Correct JSX with single spaces between props

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-multi-spaces.md

Examples of correct code for this rule, demonstrating single spaces between props.

```jsx
<App cozy />
```

```jsx
<App very cozy />
```

```jsx
<App
  prop1='abc'
  prop2='def' />
```

--------------------------------

### Use ReactDOM.render for React < 18

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md

Example of correct usage of `ReactDOM.render` when targeting React versions prior to 18.

```jsx
// when React < 18
ReactDOM.render(<MyComponent />, root);
```

--------------------------------

### Use hydrateRoot for React 18+

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md

Example of using `hydrateRoot` from `react-dom/client` for hydrating React 18+ applications.

```jsx
import { hydrateRoot } from 'react-dom/client';
const root = hydrateRoot(container, <App/>);
```

--------------------------------

### Correct PureComponent Usage (No Props/Context)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md

This example demonstrates a `React.PureComponent` that does not use `this.props` or `this.context`, which is valid regardless of the `ignorePureComponents` option.

```jsx
class Bar extends React.PureComponent {
  render() {
    return <div>Baz</div>;
  }
}
```

--------------------------------

### Disallow JSX prop spreading (Incorrect Examples)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-props-no-spreading.md

These examples show incorrect usage where props are spread, violating the rule.

```jsx
<App {...props} />
```

```jsx
<MyCustomComponent {...props} some_other_prop={some_other_prop} />
```

```jsx
<img {...props} />
```

--------------------------------

### Allow Unique Props in JSX

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-duplicate-props.md

This example demonstrates correct usage with unique props. The rule allows this code.

```jsx
<Hello firstname="John" lastname="Doe" />;
```

--------------------------------

### Include link components from global settings

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-script-url.md

Configuration example for the `react/jsx-no-script-url` rule, enabling the `includeFromSettings` option. This allows the rule to consider `linkComponents` defined in global ESLint settings, in addition to any explicitly provided list.

```json
{
  "react/jsx-no-script-url": [
    "error",
    [
      {
        "name": "Link",
        "props": ["to"]
      },
      {
        "name": "Foo",
        "props": ["href", "to"]
      }
    ],
    { "includeFromSettings": true }
  ]
}
```

--------------------------------

### No Sort Alphabetically Option Example

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md

When `noSortAlphabetically` is true, alphabetical order is not enforced. This example shows a valid configuration where alphabetical order is ignored.

```jsx
var Component = createReactClass({
  propTypes: {
    barRequired: PropTypes.any.isRequired,
    z: PropTypes.string,
    a: PropTypes.number,
  },
...
});
```

--------------------------------

### Correct JSX Filename Extension

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md

Example of a file with a .jsx extension containing JSX, which adheres to the rule.

```jsx
// filename: MyComponent.jsx
function MyComponent() {
  return <div />;
}
```

--------------------------------

### Correct Usage of PropTypes (JSX)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md

An example of a React component where the 'name' prop is defined and correctly used.

```jsx
class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

Hello.propTypes = {
  name: PropTypes.string
};
```

--------------------------------

### Correct Flow Props

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-read-only-props.md

Examples of correct read-only prop definitions in Flow using the '+' modifier.

```jsx
type Props = {
  +name: string,
}
class Hello extends React.Component<Props> {
  render () {
    return <div>Hello {this.props.name}</div>;
  }
}
```

```jsx
function Hello(props: {+name: string}) {
  return <div>Hello {props.name}</div>;
}
```

```jsx
const Hello = (props: {|+name: string|}) => (
  <div>Hello {props.name}</div>
);
```

--------------------------------

### Correct Usage of Lifecycle Methods (Default)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unsafe.md

This example demonstrates correct usage where the `UNSAFE_` prefixed methods are not used, or are used in a context that might be acceptable (e.g., extending a class that defines them).

```jsx
class Foo extends Bar {
  UNSAFE_componentWillMount() {}
  UNSAFE_componentWillReceiveProps() {}
  UNSAFE_componentWillUpdate() {}
}
```

```jsx
const Foo = bar({
  UNSAFE_componentWillMount: function() {},
  UNSAFE_componentWillReceiveProps: function() {},
  UNSAFE_componentWillUpdate: function() {}
});
```

--------------------------------

### Allowing Namespaced Components

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md

Examples of correct code when the `allowNamespace` option is true, allowing namespaced component references.

```jsx
<Allowed.div />
```

```jsx
<TestComponent.p />
```

--------------------------------

### Use ReactDOM.findDOMNode for React < 0.14

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-deprecated.md

Example of correct usage of `ReactDOM.findDOMNode` when targeting React versions prior to 0.14.

```jsx
// when React is < 0.14
ReactDOM.findDOMNode(this.refs.foo);
```

--------------------------------

### Incorrect JSX Depth Example

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-max-depth.md

This example shows JSX code that exceeds the maximum allowed nesting depth, which would be flagged by the rule.

```jsx
<App>
  <Foo>
    <Bar>
      <Baz />
    </Bar>
  </Foo>
</App>

```

--------------------------------

### Correct: displayName before render (createReactClass)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-comp.md

This example shows the correct ordering for a createReactClass component, with displayName preceding the render method.

```jsx
var Hello = createReactClass({
  displayName : 'Hello',
  render: function() {
    return <div>Hello</div>;
  }
});
```

--------------------------------

### Allowing displayName in context objects

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md

Examples of correct code for context objects that include the displayName property.

```jsx
const Hello = React.createContext();
Hello.displayName = "HelloContext";
```

```jsx
const Hello = createContext();
Hello.displayName = "HelloContext";
```

--------------------------------

### Allowing State Management via Props

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-set-state.md

This example demonstrates correct usage by managing state through props instead of local component state. This is the preferred pattern when the `react/no-set-state` rule is enforced.

```jsx
var Hello = createReactClass({
  render: function() {
    return <div onClick={this.props.handleClick}>Hello {this.props.name}</div>;
  }
});
```

--------------------------------

### Required First Option Example

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md

When `requiredFirst` is true, prop types for required props must be listed before all other props. This example shows the correct ordering.

```jsx
var Component = createReactClass({
  propTypes: {
    barRequired: PropTypes.any.isRequired,
    fooRequired: PropTypes.any.isRequired,
    a: PropTypes.number,
    z: PropTypes.string,
  },
...
});
```

--------------------------------

### Correct JSX: Declared Component

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-undef.md

This example shows correct usage where 'Hello' is imported before being used in JSX, satisfying the rule.

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

<Hello name="John" />;
```

--------------------------------

### Correct Usage with Aliases Enabled

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unsafe.md

This example shows correct usage when `checkAliases` is true, meaning the non-prefixed lifecycle methods are not used.

```jsx
class Foo extends Bar {
  componentWillMount() {}
  componentWillReceiveProps() {}
  componentWillUpdate() {}
}
```

```jsx
const Foo = bar({
  componentWillMount: function() {},
  componentWillReceiveProps: function() {},
  componentWillUpdate: function() {}
});
```

--------------------------------

### Correct defaultProps declarations

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-sort-default-props.md

These examples demonstrate correctly sorted defaultProps. The rule passes when properties are in alphabetical order.

```jsx
var Component = createReactClass({
... 
  getDefaultProps: function() {
    return {
      a: "a",
      b: "b",
      c: "c"
    };
  },
...
});
```

```jsx
class Component extends React.Component {
  ...
}
Component.defaultProps = {
  a: "a",
  b: "b",
  c: "c"
};
```

```jsx
class Component extends React.Component {
  static defaultProps = {
    a: PropTypes.any,
    b: PropTypes.any,
    c: PropTypes.any
  }
  render() {
    return <div />;
  }
}
```

```jsx
const Component = (props) => (...);
Component.defaultProps = {
  a: "a",
  y: "y",
  z: "z"
};
```

```jsx
const defaults = {
  b: "b"
};
const types = {
  a: PropTypes.string,
  b: PropTypes.string,
  c: PropTypes.string'
};
function StatelessComponentWithSpreadInPropTypes({ a, b, c }) {
  return <div>{a}{b}{c}</div>;
}
StatelessComponentWithSpreadInPropTypes.propTypes = types;
StatelessComponentWithSpreadInPropTypes.defaultProps = {
  a: "a",
  c: "c",
  ...defaults,
};
```

```jsx
export default class ClassWithSpreadInPropTypes extends BaseClass {
  static propTypes = {
    a: PropTypes.string,
    b: PropTypes.string,
    c: PropTypes.string,
    d: PropTypes.string,
    e: PropTypes.string,
    f: PropTypes.string
  }
  static defaultProps = {
    a: "a",
    b: "b",
    ...c.defaultProps,
    e: "e",
    f: "f",
    ...d.defaultProps
  }
}
```

--------------------------------

### Incorrect JSX Indentation Examples

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-indent.md

Examples of JSX code that violate consistent indentation rules. This rule helps maintain a uniform code style.

```jsx
// 2 spaces indentation
<App>
  <Hello />
</App>

// no indentation
<App>
<Hello />
</App>

// 1 tab indentation
<App>
  <Hello />
</App>
```

--------------------------------

### Correct Closing Bracket Location Examples

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md

Demonstrates correct closing bracket placements for various configurations ('tag-aligned', 'line-aligned', 'after-props', 'props-aligned').

```jsx
// 'jsx-closing-bracket-location': 1
// 'jsx-closing-bracket-location': [1, 'tag-aligned']
// 'jsx-closing-bracket-location': [1, 'line-aligned']
<Hello
  firstName="John"
  lastName="Smith"
/>;

<Say
  firstName="John"
  lastName="Smith"
>
  Hello
</Say>;

// 'jsx-closing-bracket-location': 1
// 'jsx-closing-bracket-location': [1, 'tag-aligned']
var x = <Hello
  firstName="John"
  lastName="Smith"
        />;

var x = function() {
  return <Say
    firstName="John"
    lastName="Smith"
         >
    Hello
         </Say>;
};

// 'jsx-closing-bracket-location': [1, 'line-aligned']
var x = <Hello
  firstName="John"
  lastName="Smith"
/>;

var x = function() {
  return <Say
    firstName="John"
    lastName="Smith"
  >
    Hello
  </Say>;
};

// 'jsx-closing-bracket-location': [1, {selfClosing: 'after-props'}]
<Hello
  firstName="John"
  lastName="Smith" />;

<Say
  firstName="John"
  lastName="Smith"
>
  Hello
</Say>;

// 'jsx-closing-bracket-location': [1, {selfClosing: 'props-aligned', nonEmpty: 'after-props'}]
<Hello
  firstName="John"
  lastName="Smith"
  />;

<Say
  firstName="John"
  lastName="Smith">
  Hello
</Say>;
```

--------------------------------

### Correct JSX with Spaces (always)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-equals-spacing.md

Examples of correct code when the rule is configured to enforce spaces around the equal sign.

```jsx
<Hello name = {firstname} />;
```

```jsx
<Hello name />;
```

```jsx
<Hello {...props} />;
```

--------------------------------

### Exact Flow types example

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-exact-props.md

Example of enforcing exact props using Flow's exact type objects. This prevents extra props from being passed.

```jsx
class Foo extends React.Component {
  props: {| 
    bar: string
  |}

  render() {
    return <p>{this.props.bar}</p>;
  }
}
```

--------------------------------

### Configure 'ignoreFilesWithoutCode' option

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md

Enable 'ignoreFilesWithoutCode' to prevent rejection of files that are empty or contain only whitespace and comments.

```js
"rules": {
  "react/jsx-filename-extension": [1, { "ignoreFilesWithoutCode": true }]
}
```

--------------------------------

### Allow 'someProp' with different value

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-dom-props.md

This example shows correct usage where 'someProp' is used with a different value ('value') than the disallowed one.

```jsx
const First = (props) => (
  <div someProp="value" />
);
```

--------------------------------

### Incorrect: Default prop for a non-existent prop

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/default-props-match-prop-types.md

This example demonstrates a default prop 'baz' that does not have a corresponding propType definition. This indicates a potential error.

```jsx
var Greeting = React.createClass({
  render: function() {
    return <div>Hello {this.props.foo} {this.props.bar}</div>;
  },

  propTypes: {
    foo: React.PropTypes.string,
    bar: React.PropTypes.string
  },

  getDefaultProps: function() {
    return {
      baz: "baz"
    };
  }
});
```

--------------------------------

### JSX Curly Spacing: Never (Incorrect Examples)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md

These examples show incorrect usage when the rule is configured to disallow spaces inside curly braces in JSX attributes.

```jsx
<Hello name={ firstname } />;
<Hello name={ firstname} />;
<Hello name={firstname } />;
```

--------------------------------

### Correct usage of context and props in SFCs

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-this-in-sfc.md

This example demonstrates the correct way to access context and props in a stateless functional component using function arguments.

```jsx
function Foo(props, context) {
  return (
    <div>
      {context.foo ? props.bar : ''}
    </div>
  );
}
```

```jsx
function Foo(props, context) {
  const { foo } = context;
  const { bar } = props;
  return (
    <div>
      {foo ? bar : ''}
    </div>
  );
}
```

```jsx
function Foo({ bar }, { foo }) {
  return (
    <div>
      {foo ? bar : ''}
    </div>
  );
}
```

--------------------------------

### JSX Curly Spacing: Always (Incorrect Examples)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md

These examples show incorrect usage when the rule is configured to always require spaces inside curly braces in JSX attributes.

```jsx
<Hello name={firstname} />;
<Hello name={ firstname} />;
<Hello name={firstname } />;
```

--------------------------------

### Incorrect JSX: Undeclared Component

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-undef.md

This example shows incorrect usage where 'Hello' is used without being declared or imported, leading to a ReferenceError.

```jsx
<Hello name="John" />;
```

--------------------------------

### JSX Curly Spacing: Never (Correct Examples)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md

These examples demonstrate correct usage when the rule is configured to disallow spaces inside curly braces in JSX attributes and children.

```jsx
<Hello name={firstname} />;
<Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
<Hello name={
  firstname
} />;
<Hello>{firstname}</Hello>;
<Hello>{ firstname }</Hello>;
<Hello>{
  firstname
}</Hello>;
```

--------------------------------

### Extend ESLint Configuration with Recommended Preset

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md

Apply the recommended ESLint configuration along with the React plugin's recommended rules. This provides sensible defaults for React projects.

```json
{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ]
}
```

--------------------------------

### Allow 'someProp' on 'div' elements

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-dom-props.md

This example demonstrates correct usage where 'someProp' is allowed on a 'div' element, as per the rule configuration.

```jsx
const First = (props) => (
  <div someProp="bar" />
);
```

--------------------------------

### Configure custom link components and props

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-no-script-url.md

Configuration example for the `react/jsx-no-script-url` rule, specifying custom components (`Link`, `Foo`) and the props (`to`, `href`) that should be checked for `javascript:` URLs. This allows fine-grained control over which attributes are validated.

```json
{
  "react/jsx-no-script-url": [
    "error",
    [
      {
        "name": "Link",
        "props": ["to"]
      },
      {
        "name": "Foo",
        "props": ["href", "to"]
      }
    ]
  ]
}
```

--------------------------------

### Allow key prop before spread

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-key.md

This example shows the correct pattern where the `key` prop is provided statically before any other props are spread. This is the preferred way to include keys when using spread syntax.

```jsx
<Hello key={id} {...{ id, caption }} />
```

--------------------------------

### Configure ESLint Plugin React in eslint.config.js

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md

Integrate eslint-plugin-react into the new ESLint configuration system using `eslint.config.js`. This example shows how to import the plugin, configure JSX support, and define rules.

```javascript
const react = require('eslint-plugin-react');
const globals = require('globals');

module.exports = [
  …
  {
    files: ['**/*.{js,jsx,mjs,cjs,ts,tsx}'],
    plugins: {
      react,
    },
    languageOptions: {
      parserOptions: {
        ecmaFeatures: {
          jsx: true,
        },
      },
      globals: {
        ...globals.browser,
      },
    },
    rules: {
      // ... any rules you want
      'react/jsx-uses-react': 'error',
      'react/jsx-uses-vars': 'error',
     },
    // ... others are omitted for brevity
  },
  …
];
```

--------------------------------

### Correct: Class component with static defaultProps

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/require-default-props.md

An example of a class component that correctly defines `defaultProps` using static properties for optional props.

```jsx
class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.foo} {this.props.bar}</h1>
    );
  }

  static propTypes = {
    foo: PropTypes.string,
    bar: PropTypes.string.isRequired
  };

  static defaultProps = {
    foo: "foo"
  };
}
```

--------------------------------

### JSX Curly Spacing: Always (Correct Examples)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md

These examples demonstrate correct usage when the rule is configured to always require spaces inside curly braces in JSX attributes and children.

```jsx
<Hello name={ firstname } />;
<Hello name={ {firstname: 'John', lastname: 'Doe'} } />;
<Hello name={
  firstname
} />;
<Hello>{ firstname }</Hello>;
<Hello>{firstname}</Hello>;
<Hello>{
  firstname
}</Hello>;
```

--------------------------------

### Sort Shape Prop Option Example

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/sort-prop-types.md

When `sortShapeProp` is true, props defined in `PropTypes.shape` must be sorted via the same rules as the top-level props. This example shows correct sorting within a shape.

```jsx
var Component = createReactClass({
  propTypes: {
    a: PropTypes.number,
    b: PropTypes.shape({
      d: PropTypes.number,
      e: PropTypes.func,
      f: PropTypes.bool,
    }),
    c: PropTypes.string,
  },
...
});
```

--------------------------------

### JSX Curly Spacing: Never with Children Enabled (Correct Examples)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md

These examples demonstrate correct usage when the rule is configured to disallow spaces inside curly braces, with explicit enabling for children.

```jsx
<Hello name={firstname} />;
<Hello name={{ firstname: 'John', lastname: 'Doe' }} />;
<Hello name={
  firstname
} />;
<Hello>{firstname}</Hello>;
<Hello>{
  firstname
}</Hello>;
```

--------------------------------

### Disallow Unsafe Lifecycle Methods (Default)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unsafe.md

This example shows incorrect usage of the `UNSAFE_` prefixed lifecycle methods. The rule flags these by default.

```jsx
class Foo extends React.Component {
  UNSAFE_componentWillMount() {}
  UNSAFE_componentWillReceiveProps() {}
  UNSAFE_componentWillUpdate() {}
}
```

```jsx
const Foo = createReactClass({
  UNSAFE_componentWillMount: function() {},
  UNSAFE_componentWillReceiveProps: function() {},
  UNSAFE_componentWillUpdate: function() {}
});
```

--------------------------------

### JSX Curly Spacing: Never with Children Enabled (Incorrect Examples)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md

These examples show incorrect usage when the rule is configured to disallow spaces inside curly braces, with explicit enabling for children.

```jsx
<Hello name={ firstname } />;
<Hello name={ firstname} />;
<Hello name={firstname } />;
<Hello>{ firstname }</Hello>;
```

--------------------------------

### Combine multiple allowlist criteria

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md

This configuration example demonstrates combining an explicit component allowlist ('div') with a glob pattern allowlist ('*Component') for the prop 'someProp', along with a custom message.

```js
{
  "propName": "someProp",
  "allowedFor": ['div'],
  "allowedForPatterns": ["*Component"],
  "message": "Avoid using `someProp` except `div` and components that match the `*Component` pattern"
}
```

--------------------------------

### JSX Curly Spacing: Always with Children Enabled (Correct Examples)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md

These examples demonstrate correct usage when the rule is configured to always require spaces inside curly braces, with explicit enabling for children.

```jsx
<Hello name={ firstname } />;
<Hello name={ {firstname: 'John', lastname: 'Doe'} } />;
<Hello name={
  firstname
} />;
<Hello>{ firstname }</Hello>;
<Hello>{
  firstname
}</Hello>;
```

--------------------------------

### Configure forbidden props with exclusion list

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/forbid-component-props.md

This configuration example shows how to forbid a specific prop ('someProp') on 'SomeComponent' and 'AnotherComponent', with a custom error message. The 'disallowedFor' array acts as an exclusion list.

```js
{
  "propName": "someProp",
  "disallowedFor": ["SomeComponent", "AnotherComponent"],
  "message": "Avoid using someProp for SomeComponent and AnotherComponent"
}
```

--------------------------------

### JSX Curly Spacing: Always with Children Enabled (Incorrect Examples)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-curly-spacing.md

These examples show incorrect usage when the rule is configured to always require spaces inside curly braces, with explicit enabling for children.

```jsx
<Hello name={firstname} />;
<Hello name={ firstname} />;
<Hello name={firstname } />;
<Hello>{firstname}</Hello>;
```

--------------------------------

### Correct: Single Component with Imported Component

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-multi-comp.md

This example demonstrates correct usage where one component is defined locally and another is imported from an external file.

```jsx
var Hello = require('./components/Hello');

var HelloJohn = createReactClass({
  render: function() {
    return <Hello name="John" />;
  }
});
```

--------------------------------

### Correct Class Component Example (React < 15.0.0)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-stateless-function.md

In React versions prior to 15.0.0, class components that conditionally return null or undefined are still considered valid if they don't use other forbidden class features. This example demonstrates such a case.

```jsx
class Foo extends React.Component {
  render() {
    if (!this.props.foo) {
      return null
    }
    return <div>{this.props.foo}</div>;
  }
}
```

--------------------------------

### Correct: Static Public Fields

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/static-property-placement.md

This demonstrates the correct placement of static properties using the `static public field` syntax, which is the default.

```javascript
class MyComponent extends React.Component {
  static childContextTypes = { /*...*/ };
  static contextTypes = { /*...*/ };
  static contextType = { /*...*/ };
  static displayName = "Hello";
  static defaultProps = { /*...*/ };
  static propTypes = { /*...*/ };
}
```

--------------------------------

### Configure 'allow' option

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md

Set the 'allow' option to 'as-needed' to only permit JSX extensions in files that actually contain JSX syntax.

```js
"rules": {
  "react/jsx-filename-extension": [1, { "allow": "as-needed" }]
}
```

--------------------------------

### Correct JSX with props distributed across lines

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-max-props-per-line.md

This example demonstrates correct code where props are appropriately distributed across multiple lines, adhering to the rule.

```jsx
<Hello
  firstName="John"
  lastName="Smith"
/>;

```

```jsx
<Hello
  {...this.props}
  firstName="John"
  lastName="Smith"
/>;

```

--------------------------------

### Correct Lifecycle Method Casing

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-typos.md

Examples of correctly cased React lifecycle methods. This includes methods like componentWillMount, componentWillReceiveProps, and componentDidUpdate, which must be spelled and cased precisely.

```javascript
class MyComponent extends React.Component {
  componentWillMount() {}
}
```

```javascript
class MyComponent extends React.Component {
  componentWillReceiveProps() {}
}
```

```javascript
class MyComponent extends React.Component {
  componentDidUpdate() {}
}
```

--------------------------------

### Incorrect JSX props order

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md

This example shows props that are not sorted alphabetically, which violates the rule.

```jsx
<Hello lastName="Smith" firstName="John" />
```

--------------------------------

### Customize Flat Configs with Globals

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md

Extend a flat configuration from `eslint-plugin-react` by adding custom global variables. This example merges browser and service worker globals with the recommended configuration.

```javascript
const reactPlugin = require('eslint-plugin-react');
const globals = require('globals');

module.exports = [
  …
  {
    files: ['**/*.{js,mjs,cjs,jsx,mjsx,ts,tsx,mtsx}'],
    ...reactPlugin.configs.flat.recommended,
    languageOptions: {
      ...reactPlugin.configs.flat.recommended.languageOptions,
      globals: {
        ...globals.serviceworker,
        ...globals.browser,
      },
    },
  },
  …
];
```

--------------------------------

### Allowed Standard Method Lifecycle with createReactClass

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-arrow-function-lifecycle.md

Using standard method declarations for lifecycle methods within `createReactClass` is the recommended approach.

```javascript
var AnotherHello = createReactClass({
  render() {
    return <div />;
  },
});
```

--------------------------------

### Configure Rule Options with String Shortcut

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md

Configure the rule using a string shortcut for the desired closing bracket location. Defaults to 'tag-aligned'.

```javascript
"react/jsx-closing-bracket-location": <enabled> // -> [<enabled>, "tag-aligned"]
"react/jsx-closing-bracket-location": [<enabled>, "<location>"]
```

--------------------------------

### Use Flat Configs from ESLint React Plugin

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/README.md

Import and apply pre-defined flat configurations like `recommended` and `jsx-runtime` from `eslint-plugin-react`. The `jsx-runtime` config is recommended for React 17+.

```javascript
const reactPlugin = require('eslint-plugin-react');

module.exports = [
  …
  reactPlugin.configs.flat.recommended, // This is not a plugin object, but a shareable config object
  reactPlugin.configs.flat['jsx-runtime'], // Add this if you are using React 17+
  …
];
```

--------------------------------

### Correct TypeScript Props

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-read-only-props.md

Examples of correct read-only prop definitions in TypeScript using the 'readonly' keyword.

```tsx
type Props = {
  readonly name: string;
}
class Hello extends React.Component<Props> {
  render () {
    return <div>Hello {this.props.name}</div>;
  }
}
```

```tsx
interface Props {
  readonly name: string;
}
class Hello extends React.Component<Props> {
  render () {
    return <div>Hello {this.props.name}</div>;
  }
}
```

--------------------------------

### Correct code with prevent and allowMultilines true

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-newline.md

This example shows correct code when `prevent` is true and `allowMultilines` is true, demonstrating allowed newlines within multiline JSX elements and expressions while preventing empty lines between adjacent ones.

```jsx
<div>
  {showSomething === true && <Something />}

  <Button>Button 3</Button>

  {showSomethingElse === true ? (
    <SomethingElse />
  ) : (
    <ErrorMessage />
  )}
</div>
```

--------------------------------

### Correct JavaScript Style Prop Values

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/style-prop-object.md

These examples demonstrate correct usage of the style prop with React.createElement, using object literals or variables holding objects.

```javascript
React.createElement("div", { style: { color: 'red' }}});
```

```javascript
React.createElement("Hello", { style: { color: 'red' }}});
```

```javascript
const styles = { height: '100px' };
React.createElement("div", { style: styles });
```

--------------------------------

### Allow valid button types

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/button-has-type.md

Examples of correct code demonstrating valid usage of button elements with explicit and dynamic type attributes.

```jsx
var Hello = <span>Hello</span>
var Hello = <span type="foo">Hello</span>
var Hello = <button type="button">Hello</button>
var Hello = <button type="submit">Hello</button>
var Hello = <button type="reset">Hello</button>
var Hello = <button type={condition ? "button" : "submit"}>Hello</button>
```

```jsx
var Hello = React.createElement('span', {}, 'Hello')
var Hello = React.createElement('span', {type: 'foo'}, 'Hello')
var Hello = React.createElement('button', {type: 'button'}, 'Hello')
var Hello = React.createElement('button', {type: 'submit'}, 'Hello')
var Hello = React.createElement('button', {type: 'reset'}, 'Hello')
var Hello = React.createElement('button', {type: condition ? 'button' : 'submit'}, 'Hello')
```

--------------------------------

### Allowing other logic in componentWillUpdate (Correct)

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-will-update-set-state.md

This example demonstrates correct usage where `componentWillUpdate` contains logic other than `this.setState`.

```jsx
var Hello = createReactClass({
  componentWillUpdate: function() {
    this.props.prepareHandler();
  },
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
```

--------------------------------

### Rule configuration for propWrapperFunctions

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prefer-exact-props.md

Configuration setting to enable the rule for specific prop wrapper functions, like 'exact'.

```json
{
  "settings": {
    "propWrapperFunctions": [
      {"property": "exact", "exact": true}
    ]
  }
}
```

--------------------------------

### Specific props first - incorrect order

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-sort-props.md

This example shows an incorrect order when `sortFirst` is configured with 'className'.

```jsx
// 'jsx-sort-props': [1, { sortFirst: ['className'] }]
<Hello name="John" className="test" />
```

--------------------------------

### Allow safe JSX properties

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-danger.md

This example demonstrates the correct and safe way to render HTML content without using dangerous properties. This is the preferred approach.

```jsx
var React = require('react');

var Hello = <div>Hello World</div>;
```

--------------------------------

### Incorrect JSX Component Naming

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-pascal-case.md

Examples of incorrect code where user-defined JSX components do not follow PascalCase.

```jsx
<Test_component />
```

```jsx
<TEST_COMPONENT />
```

--------------------------------

### Correct definitions with specific configurations

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/function-component-definition.md

Examples of correct code when enforcing specific function types for named and unnamed components, such as only function declarations for named components, or only arrow functions for unnamed components.

```jsx
// only function declarations for named components
// [2, { "namedComponents": "function-declaration" }]
function Component (props) {
  return <div />
}

// only function expressions for named components
// [2, { "namedComponents": "function-expression" }]
const Component = function (props) {
  return <div />;
};

// only arrow functions for named components
// [2, { "namedComponents": "arrow-function" }]
const Component = (props) => {
  return <div />;
};

// only function expressions for unnamed components
// [2, { "unnamedComponents": "function-expression" }]
function getComponent () {
  return function (props) {
    return <div />;
  };
}

// only arrow functions for unnamed components
// [2, { "unnamedComponents": "arrow-function" }]
function getComponent () {
  return (props) => {
    return <div />;
  };
}
```

--------------------------------

### Rule Configuration Options

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unused-prop-types.md

Illustrates the configuration format for the 'react/no-unused-prop-types' rule, including options to enable, ignore specific props, and define custom validators.

```javascript
"react/no-unused-prop-types": [<enabled>, { ignore: <ignore>, customValidators: <customValidator>, skipShapeProps: <skipShapeProps> }]
```

--------------------------------

### Incorrect JSX Filename Extension

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md

Example of a file with a .js extension containing JSX, which violates the rule.

```jsx
// filename: MyComponent.js
function MyComponent() {
  return <div />;
}
```

--------------------------------

### Allowing displayName in React components

Source: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/display-name.md

Examples of correct code that includes the displayName property for React components.

```jsx
var Hello = createReactClass({
  displayName: 'Hello',
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

const Hello = React.memo(function Hello({ a }) {
  return <>{a}</>
})
```