Enforce JSX inline conditional as a ternary #3318
Conversation
| parserOptions: { | ||
| ecmaFeatures: { | ||
| jsx: true, | ||
| }, | ||
| }, | ||
| rules: { | ||
| 'react/display-name': 2, | ||
| 'react/jsx-inline-conditional': 2, |
There was a problem hiding this comment.
Because this is helps identify+fix a certain class of rendering bugs and isn't strictly stylistic, I enabled this by default. Let me know if I should change this!
There was a problem hiding this comment.
Adding a rule to the recommended config is a breaking change, so we'll basically never be doing that. Please remove it.
Codecov Report
@@ Coverage Diff @@
## master #3318 +/- ##
==========================================
- Coverage 97.70% 97.57% -0.14%
==========================================
Files 123 124 +1
Lines 8764 8777 +13
Branches 3176 3180 +4
==========================================
+ Hits 8563 8564 +1
- Misses 201 213 +12
Continue to review full report at Codecov.
|
| parserOptions: { | ||
| ecmaFeatures: { | ||
| jsx: true, | ||
| }, | ||
| }, | ||
| rules: { | ||
| 'react/display-name': 2, | ||
| 'react/jsx-inline-conditional': 2, |
There was a problem hiding this comment.
Adding a rule to the recommended config is a breaking change, so we'll basically never be doing that. Please remove it.
| plugins: [ | ||
| 'react', | ||
| ], | ||
| plugins: ['react'], |
There was a problem hiding this comment.
please revert unrelated formatting changes; if perhaps you're running prettier on repos that do not use it, please don't do that either :-)
| { | ||
| code: '<div>{possiblyNull ?? <SomeComponent />}</div>', | ||
| parser: parsers.TYPESCRIPT_ESLINT, | ||
| }, | ||
| { | ||
| code: '<div>{possiblyNull ?? <SomeComponent />}</div>', | ||
| parser: parsers['@TYPESCRIPT_ESLINT'], | ||
| }, |
There was a problem hiding this comment.
these should not be needed, since the parsers.all helper should automatically run every test case in every parser.
| { | |
| code: '<div>{possiblyNull ?? <SomeComponent />}</div>', | |
| parser: parsers.TYPESCRIPT_ESLINT, | |
| }, | |
| { | |
| code: '<div>{possiblyNull ?? <SomeComponent />}</div>', | |
| parser: parsers['@TYPESCRIPT_ESLINT'], | |
| }, |
| code: '<div>{possiblyNull ?? <SomeComponent />}</div>', | ||
| parserOptions: { | ||
| ecmaVersion: 2020, | ||
| }, |
There was a problem hiding this comment.
| code: '<div>{possiblyNull ?? <SomeComponent />}</div>', | |
| parserOptions: { | |
| ecmaVersion: 2020, | |
| }, | |
| code: '<div>{possiblyNull ?? <SomeComponent />}</div>', | |
| features: ['nullish coalescing'], |
and then we'll need to add that feature to the parsers.all helper
|
I think #3203 may have covered this? |
This fixes a fairly common bug where React will render the falsy left side of a conditional with
&&operator, resulting in things like0showing up in your UI. See #2888 (comment).Fixes #1979
Closes #2888
cc @ljharb