💼 This rule is enabled in the recommended
config.
DisplayName allows you to name your component. This name is used by React in debugging messages.
Examples of incorrect code for this rule:
var Hello = createReactClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
const Hello = React.memo(({ a }) => {
return <>{a}</>
})
export default ({ a }) => {
return <>{a}</>
}
Examples of correct code for this rule:
var Hello = createReactClass({
displayName: 'Hello',
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
const Hello = React.memo(function Hello({ a }) {
return <>{a}</>
})
...
"react/display-name": [<enabled>, { "ignoreTranspilerName": <boolean> }]
...
When true
the rule will ignore the name set by the transpiler and require a displayName
property in this case.
Examples of correct code for { ignoreTranspilerName: true }
option:
var Hello = createReactClass({
displayName: 'Hello',
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
module.exports = Hello;
export default class Hello extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
Hello.displayName = 'Hello';
export default function Hello({ name }) {
return <div>Hello {name}</div>;
}
Hello.displayName = 'Hello';
Examples of incorrect code for { ignoreTranspilerName: true }
option:
var Hello = createReactClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
module.exports = Hello;
export default class Hello extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
module.exports = createReactClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
export default class extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
function HelloComponent() {
return createReactClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
}
module.exports = HelloComponent();
For this rule to work we need to detect React components, this could be very hard since components could be declared in a lot of ways.
For now we should detect components created with:
createReactClass()
- an ES6 class that inherit from
React.Component
orComponent
- a stateless function that return JSX or the result of a
React.createElement
call.