# react/display-name

> Require every component to have a name that React can show

React DevTools, warnings, and component stacks show a component by its name. A component without one shows up as `Anonymous` or `Unknown`, so you can't tell which one failed.

React takes the name from the function or class, or from the variable it's assigned to. So the rule mostly reports anonymous functions that are exported directly or passed to `memo` or `forwardRef`. A `displayName` property also counts.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/display-name" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/display-name" = ["error", {
  ignoreTranspilerName = false,
  checkContextObjects = false,
}]
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
export default () => <nav>Menu</nav>;
```

{/* bad */}
```jsx
import { forwardRef } from "react";

export const TextField = forwardRef((props, ref) => <input ref={ref} {...props} />);
```

Not reported:

{/* good */}
```jsx
export default function Menu() {
  return <nav>Menu</nav>;
}
```

{/* good */}
```jsx
import { forwardRef } from "react";

export const TextField = forwardRef(function TextField(props, ref) {
  return <input ref={ref} {...props} />;
});

export const Search = forwardRef((props, ref) => <input type="search" ref={ref} {...props} />);
Search.displayName = "Search";
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `ignoreTranspilerName` | `false` | Don't count the name of the function, class, or variable. Only an explicit `displayName` counts. |
| `checkContextObjects` | `false` | Also require a `displayName` on the result of `createContext()`. |

{/* bad {"options": [{"ignoreTranspilerName": true}]} */}
```jsx
export default function Menu() {
  return <nav>Menu</nav>;
}
```

{/* good {"options": [{"ignoreTranspilerName": true}]} */}
```jsx
export default function Menu() {
  return <nav>Menu</nav>;
}
Menu.displayName = "Menu";
```

{/* bad {"options": [{"checkContextObjects": true}]} */}
```jsx
import { createContext } from "react";

const ThemeContext = createContext("light");
```

{/* good {"options": [{"checkContextObjects": true}]} */}
```jsx
import { createContext } from "react";

const ThemeContext = createContext("light");
ThemeContext.displayName = "ThemeContext";
```