Skip to content

linter: react/display-name false positive for camelCase function returning JSX #23478

Description

@elusiveunit

What version of Oxlint are you using?

1.70.0

What command did you run?

oxlint

What does your .oxlintrc.json (or oxlint.config.ts) config file look like?

import { defineConfig } from 'oxlint';

export default defineConfig({
	plugins: ['react'],
	rules: {
		'react/display-name': ['warn', { ignoreTranspilerName: true }],
	},
});

What happened?

Testing.tsx

export default function Testing() {
	const renderThing = () => <div>Thing</div>;
	return <div>{renderThing()}</div>;
}
Testing.displayName = 'Testing';

Output from npx oxlint:

  ⚠ react(display-name): Component definition is missing display name.
   ╭─[Testing.tsx:2:8]
 1 │ export default function Testing() {
 2 │     const renderThing = () => <div>Thing</div>;
   ·           ───────────
 3 │     return <div>{renderThing()}</div>;
   ╰────
  help: Add a `displayName` property to the component.

Found 1 warning and 0 errors.
  • Changing to const ThingComponent = () => <div>Thing</div>; and rendering as <ThingComponent /> still works and is also reported by the equivalent ESLint rule, but only oxlint reports the lowercase version.
  • Changing to const renderThing = () => 'Thing'; removes the error.

Metadata

Metadata

Assignees

Labels

Type

Fields

Priority

None yet

Effort

None yet

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions