Disable eslint react/display-name rule

[lshaowei18]

Filed originally by @chesterhow in : #7351 (I can't transfer to eslint repo thats why I created a new issue)

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

About

This was initially brought up by @lshaowei18 here #7345#discussion_r662694356

The issue we're encountering is that react/display-name rule is throwing warnings whenever we use the value prop in FormattedMessage.

<FormattedMessage
  id="general.delete_workspace_confirmation_key"
  defaultMessage="Please type <b>{spaceName}</b> to confirm."
  values={{
    spaceName: space.name,
    // eslint-disable-next-line react/display-name
    b: (chunks) => <b>{chunks}</b>,
  }}
/>

This is actually a false positive, as the anonymous function is not a React component definition at all. And so we end up having to do disable-next-line on each occurrence of this.

Found some issues related this (e.g. jsx-eslint/eslint-plugin-react#512) and it turns out that this rule is generally overly aggressive and not good at differentiating react components from non-react components.

The "fix" recommended by the maintainer is to do something like this:

<FormattedMessage
  id="general.delete_workspace_confirmation_key"
  defaultMessage="Please type <b>{spaceName}</b> to confirm."
  values={{
    spaceName: space.name,
    b: function bold(chunks) { return <b>{chunks}</b>; },
  }}
/>

Unsurprisingly his solution has received a whopping 35 thumbs downs. And many have just resorted to disabling the rule completely.

Should we consider disabling the rule too?

[lxcid]

Just tested, don't think its an issue anymore as it seems to have fixed the false positive, closing. Feel free to reopen if its still an issue.