diff --git a/README.md b/README.md
index 68461e0ca9..f9e8cf1fc3 100644
--- a/README.md
+++ b/README.md
@@ -162,6 +162,7 @@ Enable the rules that you would like to use.
* [react/jsx-curly-brace-presence](docs/rules/jsx-curly-brace-presence.md): Disallow unnecessary JSX expressions when literals alone are sufficient or enfore JSX expressions on literals in JSX children or attributes (fixable)
* [react/jsx-curly-newline](docs/rules/jsx-curly-newline.md): Enforce consistent line breaks inside jsx curly (fixable)
* [react/jsx-curly-spacing](docs/rules/jsx-curly-spacing.md): Enforce or disallow spaces inside of curly braces in JSX attributes (fixable)
+* [react/jsx-embed-condition](docs/rules/jsx-embed-condition.md): Disallows use of `&&` inside JSX Embeds to avoid conditional numbers from being rendered
* [react/jsx-equals-spacing](docs/rules/jsx-equals-spacing.md): Disallow or enforce spaces around equal signs in JSX attributes (fixable)
* [react/jsx-filename-extension](docs/rules/jsx-filename-extension.md): Restrict file extensions that may contain JSX
* [react/jsx-first-prop-new-line](docs/rules/jsx-first-prop-new-line.md): Ensure proper position of the first property in JSX (fixable)
diff --git a/docs/rules/jsx-embed-condition.md b/docs/rules/jsx-embed-condition.md
new file mode 100644
index 0000000000..3ee904cd2b
--- /dev/null
+++ b/docs/rules/jsx-embed-condition.md
@@ -0,0 +1,34 @@
+# Disallow && condition inside JSX Embed. (react/jsx-embed-condition)
+
+This rule disallows use of `&&` inside JSX Embeds to avoid conditional numbers from being rendered.
+
+## Why?
+
+The Official React docs warns against using `&&` in inline JSX embed expressions. The reason behind this is explained well in the [Official React docs](https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator).
+Imagine having a var `x` with a possible value of `1` or `0`. If you write `{x &&
}`, it'll render `` when `x` is `1` but instead of rendering
+nothing when `x` is `0`, it'll render `0` literal. This can lead to hard to figure out bugs, especially in React Native.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+
+ {x && }
+
+
+ {x || y && Hello}
+
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+
+ {x ? : null}
+
+// --
+
+ {x || y ? Hello : null}
+
+```
diff --git a/index.js b/index.js
index 8edb1177f1..cbd292a67e 100644
--- a/index.js
+++ b/index.js
@@ -22,6 +22,7 @@ const allRules = {
'jsx-closing-tag-location': require('./lib/rules/jsx-closing-tag-location'),
'jsx-curly-spacing': require('./lib/rules/jsx-curly-spacing'),
'jsx-curly-newline': require('./lib/rules/jsx-curly-newline'),
+ 'jsx-embed-condition': require('./lib/rules/jsx-embed-condition'),
'jsx-equals-spacing': require('./lib/rules/jsx-equals-spacing'),
'jsx-filename-extension': require('./lib/rules/jsx-filename-extension'),
'jsx-first-prop-new-line': require('./lib/rules/jsx-first-prop-new-line'),
diff --git a/lib/rules/jsx-embed-condition.js b/lib/rules/jsx-embed-condition.js
new file mode 100644
index 0000000000..2d9d860957
--- /dev/null
+++ b/lib/rules/jsx-embed-condition.js
@@ -0,0 +1,45 @@
+/**
+ * @fileoverview Prevents usage of && condition in JSX Embeds.
+ * @author Anees Iqbal
+ */
+
+'use strict';
+
+const docsUrl = require('../util/docsUrl');
+
+// -----------------------------------------------------------------------------
+// Rule Definition
+// -----------------------------------------------------------------------------
+
+module.exports = {
+ meta: {
+ docs: {
+ description: 'Prevents usage of && condition in JSX embed',
+ category: 'Best Practices',
+ recommended: false,
+ url: docsUrl('jsx-embed-condition')
+ },
+
+ schema: []
+ },
+
+ create(context) {
+ return {
+ JSXExpressionContainer(node) {
+ if (
+ node.parent == null
+ || node.parent.type !== 'JSXElement'
+ || node.expression == null
+ || node.expression.type !== 'LogicalExpression'
+ || node.expression.operator === '??'
+ ) {
+ return;
+ }
+ context.report({
+ node,
+ message: 'Using && to condition JSX embeds is forbidden. Convert it to a ternary operation instead'
+ });
+ }
+ };
+ }
+};
diff --git a/tests/lib/rules/jsx-embed-condition.js b/tests/lib/rules/jsx-embed-condition.js
new file mode 100644
index 0000000000..d3f213fe14
--- /dev/null
+++ b/tests/lib/rules/jsx-embed-condition.js
@@ -0,0 +1,72 @@
+/**
+ * @fileoverview Prevents usage of && condition in JSX Embeds.
+ * @author Anees Iqbal
+ */
+
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const RuleTester = require('eslint').RuleTester;
+const version = require('eslint/package.json').version;
+const semver = require('semver');
+const rule = require('../../../lib/rules/jsx-embed-condition');
+const parsers = require('../../helpers/parsers');
+
+const parserOptions = {
+ ecmaVersion: 2018,
+ sourceType: 'module',
+ ecmaFeatures: {
+ jsx: true
+ }
+};
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({parserOptions});
+ruleTester.run('jsx-embed-condition', rule, {
+ valid: [].concat({
+ code: 'Test'
+ }, {
+ code: 'Another'
+ }, {
+ code: ' bar(e)}>Hello World'
+ }, {
+ code: '{x ? : null}'
+ }, {
+ code: '{x ? Hello
: null}'
+ }, {
+ code: '{x ? {y ? : }
: null}'
+ }, {
+ code: '{x ? {y ? : }
: null}'
+ }, semver.satisfies(version, '<= 5') ? [] : [{
+ code: '{x ?? }',
+ parserOptions: {
+ ecmaVersion: 2020
+ }
+ }, {
+ code: '{x ?? }',
+ parser: parsers.TYPESCRIPT_ESLINT
+ }, {
+ code: '{x ?? }',
+ parser: parsers['@TYPEDCRIPT_ESLINT']
+ }]),
+
+ invalid: [{
+ code: '',
+ output: '',
+ errors: [
+ {message: 'Using && to condition JSX embeds is forbidden. Convert it to a ternary operation instead'}
+ ]
+ }, {
+ code: '',
+ output: '',
+ errors: [
+ {message: 'Using && to condition JSX embeds is forbidden. Convert it to a ternary operation instead'}
+ ]
+ }]
+});