From 1447508e58060942e2224c623b40765b12933e78 Mon Sep 17 00:00:00 2001
From: Moti Zilberman <motiz88@gmail.com>
Date: Sun, 12 Aug 2018 00:33:50 +0100
Subject: [PATCH 1/4] Warn when the string "false" is the value of a boolean
 DOM prop

---
 .../src/__tests__/ReactDOMComponent-test.js   | 26 +++++++++++++++++++
 .../src/shared/ReactDOMUnknownPropertyHook.js | 20 ++++++++++++++
 2 files changed, 46 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 642c5834c881b..f712a695d7abb 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -2506,6 +2506,32 @@ describe('ReactDOMComponent', () => {
     });
   });
 
+  describe('Boolean attributes', function() {
+    it('warns on the ambiguous string value "false"', function() {
+      let el;
+      expect(() => {
+        el = ReactTestUtils.renderIntoDocument(<div hidden="false" />);
+      }).toWarnDev(
+        'Received the string `false` for the boolean attribute `hidden`. ' +
+          'Did you mean hidden={false}?',
+      );
+
+      expect(el.getAttribute('hidden')).toBe('');
+    });
+
+    it('warns on the ambiguous string value "False"', function() {
+      let el;
+      expect(() => {
+        el = ReactTestUtils.renderIntoDocument(<div hidden="False" />);
+      }).toWarnDev(
+        'Received the string `False` for the boolean attribute `hidden`. ' +
+          'Did you mean hidden={false}?',
+      );
+
+      expect(el.getAttribute('hidden')).toBe('');
+    });
+  });
+
   describe('Hyphenated SVG elements', function() {
     it('the font-face element is not a custom element', function() {
       let el;
diff --git a/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
index 9e7fda4e6cd8d..b279cdf856b26 100644
--- a/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
+++ b/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
@@ -13,6 +13,7 @@ import warning from 'shared/warning';
 
 import {
   ATTRIBUTE_NAME_CHAR,
+  BOOLEAN,
   RESERVED,
   shouldRemoveAttributeWithWarning,
   getPropertyInfo,
@@ -226,6 +227,25 @@ if (__DEV__) {
       return false;
     }
 
+    // Warn when passing the string 'false' into a boolean prop
+    if (
+      propertyInfo !== null &&
+      propertyInfo.type === BOOLEAN &&
+      typeof value === 'string' &&
+      value.toLowerCase() === 'false'
+    ) {
+      warning(
+        false,
+        'Received the string `%s` for the boolean attribute `%s`. ' +
+          'Did you mean %s={false}?',
+        value,
+        name,
+        name,
+      );
+      warnedProperties[name] = true;
+      return true;
+    }
+
     return true;
   };
 }

From b8f83cdfe4c0499c67ee07658a3e0f1b08a1afd6 Mon Sep 17 00:00:00 2001
From: Moti Zilberman <motiz88@gmail.com>
Date: Sun, 12 Aug 2018 17:07:41 +0100
Subject: [PATCH 2/4] Only warn on exact case match for "false" in DOM boolean
 props

---
 .../src/__tests__/ReactDOMComponent-test.js          | 12 ------------
 .../src/shared/ReactDOMUnknownPropertyHook.js        |  5 ++---
 2 files changed, 2 insertions(+), 15 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index f712a695d7abb..ba5c3e7a98ae1 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -2518,18 +2518,6 @@ describe('ReactDOMComponent', () => {
 
       expect(el.getAttribute('hidden')).toBe('');
     });
-
-    it('warns on the ambiguous string value "False"', function() {
-      let el;
-      expect(() => {
-        el = ReactTestUtils.renderIntoDocument(<div hidden="False" />);
-      }).toWarnDev(
-        'Received the string `False` for the boolean attribute `hidden`. ' +
-          'Did you mean hidden={false}?',
-      );
-
-      expect(el.getAttribute('hidden')).toBe('');
-    });
   });
 
   describe('Hyphenated SVG elements', function() {
diff --git a/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
index b279cdf856b26..0b9bbf5447449 100644
--- a/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
+++ b/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
@@ -229,10 +229,9 @@ if (__DEV__) {
 
     // Warn when passing the string 'false' into a boolean prop
     if (
+      value === 'false' &&
       propertyInfo !== null &&
-      propertyInfo.type === BOOLEAN &&
-      typeof value === 'string' &&
-      value.toLowerCase() === 'false'
+      propertyInfo.type === BOOLEAN
     ) {
       warning(
         false,

From f3248f2f87a6a887d01e797a347d78dcfcf7f26f Mon Sep 17 00:00:00 2001
From: Moti Zilberman <motiz88@gmail.com>
Date: Sun, 12 Aug 2018 17:12:35 +0100
Subject: [PATCH 3/4] Warn on string "true" as well as "false" in DOM boolean
 props

---
 .../src/__tests__/ReactDOMComponent-test.js          | 12 ++++++++++++
 .../react-dom/src/__tests__/ReactDOMInput-test.js    |  2 +-
 .../src/shared/ReactDOMUnknownPropertyHook.js        |  7 ++++---
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index ba5c3e7a98ae1..95583504edd10 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -2518,6 +2518,18 @@ describe('ReactDOMComponent', () => {
 
       expect(el.getAttribute('hidden')).toBe('');
     });
+
+    it('warns on the potentially-ambiguous string value "true"', function() {
+      let el;
+      expect(() => {
+        el = ReactTestUtils.renderIntoDocument(<div hidden="true" />);
+      }).toWarnDev(
+        'Received the string `true` for the boolean attribute `hidden`. ' +
+          'Did you mean hidden={true}?',
+      );
+
+      expect(el.getAttribute('hidden')).toBe('');
+    });
   });
 
   describe('Hyphenated SVG elements', function() {
diff --git a/packages/react-dom/src/__tests__/ReactDOMInput-test.js b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
index 5afa9dcf7aaf4..b21931cb53b02 100644
--- a/packages/react-dom/src/__tests__/ReactDOMInput-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMInput-test.js
@@ -444,7 +444,7 @@ describe('ReactDOMInput', () => {
 
   it('should take `defaultValue` when changing to uncontrolled input', () => {
     const node = ReactDOM.render(
-      <input type="text" value="0" readOnly="true" />,
+      <input type="text" value="0" readOnly={true} />,
       container,
     );
     expect(node.value).toBe('0');
diff --git a/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
index 0b9bbf5447449..a196cafe326d3 100644
--- a/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
+++ b/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
@@ -227,19 +227,20 @@ if (__DEV__) {
       return false;
     }
 
-    // Warn when passing the string 'false' into a boolean prop
+    // Warn when passing the strings 'false' or 'true' into a boolean prop
     if (
-      value === 'false' &&
+      (value === 'false' || value === 'true') &&
       propertyInfo !== null &&
       propertyInfo.type === BOOLEAN
     ) {
       warning(
         false,
         'Received the string `%s` for the boolean attribute `%s`. ' +
-          'Did you mean %s={false}?',
+          'Did you mean %s={%s}?',
         value,
         name,
         name,
+        value,
       );
       warnedProperties[name] = true;
       return true;

From f70a0eb8016ac93c94e833b8ec79fdd94254025e Mon Sep 17 00:00:00 2001
From: Moti Zilberman <motiz88@gmail.com>
Date: Sun, 12 Aug 2018 17:33:27 +0100
Subject: [PATCH 4/4] Clarify warnings on "true" / "false" values in DOM
 boolean props

---
 packages/react-dom/src/__tests__/ReactDOMComponent-test.js   | 2 ++
 packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
index 95583504edd10..b83ce5d5e1f36 100644
--- a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -2513,6 +2513,7 @@ describe('ReactDOMComponent', () => {
         el = ReactTestUtils.renderIntoDocument(<div hidden="false" />);
       }).toWarnDev(
         'Received the string `false` for the boolean attribute `hidden`. ' +
+          'The browser will interpret it as a truthy value. ' +
           'Did you mean hidden={false}?',
       );
 
@@ -2525,6 +2526,7 @@ describe('ReactDOMComponent', () => {
         el = ReactTestUtils.renderIntoDocument(<div hidden="true" />);
       }).toWarnDev(
         'Received the string `true` for the boolean attribute `hidden`. ' +
+          'Although this works, it will not work as expected if you pass the string "false". ' +
           'Did you mean hidden={true}?',
       );
 
diff --git a/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js b/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
index a196cafe326d3..3c42172f9eac5 100644
--- a/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
+++ b/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
@@ -236,9 +236,13 @@ if (__DEV__) {
       warning(
         false,
         'Received the string `%s` for the boolean attribute `%s`. ' +
+          '%s ' +
           'Did you mean %s={%s}?',
         value,
         name,
+        value === 'false'
+          ? 'The browser will interpret it as a truthy value.'
+          : 'Although this works, it will not work as expected if you pass the string "false".',
         name,
         value,
       );