Enforce JSX inline conditional as a ternary

[frolic]

This fixes a fairly common bug where React will render the falsy left side of a conditional with && operator, resulting in things like 0 showing up in your UI. See https://github.com/jsx-eslint/eslint-plugin-react/pull/2888#issuecomment-751413618.

Fixes #1979 Closes #2888

cc @ljharb

[codecov[bot]]

Codecov Report

Merging #3318 (6e6e2db) into master (aac7fb9) will decrease coverage by 0.13%. The diff coverage is 100.00%.

@@            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     

Impacted Files	Coverage Δ
index.js	100.00% <ø> (ø)
lib/rules/jsx-inline-conditional.js	100.00% <100.00%> (ø)
lib/rules/no-arrow-function-lifecycle.js	88.52% <0.00%> (-9.84%)	:arrow_down:
lib/rules/jsx-curly-spacing.js	91.17% <0.00%> (-2.95%)	:arrow_down:
lib/rules/jsx-props-no-spreading.js	95.65% <0.00%> (-2.18%)	:arrow_down:
lib/util/componentUtil.js	97.33% <0.00%> (-1.34%)	:arrow_down:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update aac7fb9...6e6e2db. Read the comment docs.

[ljharb]

I think #3203 may have covered this?