react/display-name false positive in render prop ternary

[jaydenseric]

The react/display-name rule has a false positive error when a component render prop is a ternary containing an arrow function expression:

<Section renderFigure={image ? () => <img src={image.src} /> : null} />

This does not have an error:

<Section renderFigure={() => <img src={image.src} />} />

So the ternary must confuse the rule somehow.

[ljharb]

In this case, the arrow function is considered a component.

It seems worth improving our component detection to avoid render props - cc @alexzherdev

[pawelnvk]

Just a side-note, but I would rather expect ternary inside of callback instead of passing callback if ternary is fulfilled.

[jzabala]

This doesn't happen with versions:

"babel-eslint": "^10.1.0"
"eslint": "^7.4.0"
"eslint-plugin-react": "^7.20.3"

[ljharb]

@jzabala your screenshot shows that the false positive does happen?

[jzabala]

@jzabala your screenshot shows that the false positive does happen?

Sorry for the confusing screenshot 😅 . I wanted to show that the rule was active, since it is triggered at the bottom, but it is not triggered in the case reported in the issue (the ternary). So, this issue is fixed in the specified versions.

[ljharb]

ah, thanks. Closing, then :-)