JSX: "component definition is missing display name"

[saschagehlich]

I get this warning for code like this:

class HeaderComponent extends React.Component {

}

But the JSX in Depth article states:

JSX will infer the class's displayName from the variable assignment when the displayName is undefined

So I guess this rule should be disabled?

[feross]

What warning do you get? Please run standard with the --verbose flag to get the rule name.

[saschagehlich]

BPMComponent component definition is missing display name (react/display-name)

With the following code:

/* global React */
export default class BPMComponent extends React.Component {
  render () {
    return (
      <div></div>
    )
  }
}

[feross]

Do any other react users have an opinion on this?

[dcousens]

@feross the displayName can be inferred, but it is also only for debugging. I personally use it very rarely because I already have source maps for my errors anyway, but, I may be the exception.

[RichardLitt]

I get the error for this if I don't include displayName. I find the error useful, but my syntax seems different than yours.

var React = require('react')

module.exports = React.createClass({
  displayName: 'Alert',
  propTypes: {
    data: React.PropTypes.string
  },
    render: function () {
    return (
      <div>
        {typeof this.props.data === 'string' ?
        <button type="button" className="btn btn-warning btn-full">
        {this.props.data}
        </button>
        : ''}
      </div>
    )
  }
})

[cayuu]

The example provided by @RichardLitt is the use-case where having a warning show up is useful if you haven't declared displayName.

All other "normal" workflows (shown by the others in this thread) are valid/idiomatic, and do not warrant even a 'warning' (let alone an error). As @dcousens says, declaring displayName is a debugging tool.

For now, get back to the greenlight by adding displayName (this not idiomatic, it's extra code and in all cases except creating anonymous classes, it's completely unnecessary):

export default class BPMComponent extends React.Component {
  get displayName () { return 'BPMComponent'; }
  // ...
}

+1 to remove this as an error.

[feross]

If someone sends a PR for this, I'll merge it.