Update unknown property warning to include custom attribute information

facebook · Aug 3, 2017 · 07af3db · 07af3db
1 parent be4c932
commit 07af3db
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/docs/warnings/unknown-prop.md b/docs/warnings/unknown-prop.md
@@ -3,7 +3,7 @@ title: Unknown Prop Warning
 layout: single
 permalink: warnings/unknown-prop.html
 ---
-The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
+The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is either unrecognized by React as a legal DOM attribute/property, or is not a string, number, or boolean value. You should ensure that your DOM elements do not have spurious props floating around.
 
 There are a couple of likely reasons this warning could be appearing:
 

diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -148,8 +148,10 @@ describe('ReactDOMComponent', () => {
       ReactDOM.render(<div foo={() => {}} />, container);
       expectDev(console.error.calls.count(0)).toBe(1);
       expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
-        'Warning: Unknown prop `foo` on <div> tag. Remove this prop from the element. ' +
-          'For details, see https://fb.me/react-unknown-prop\n    in div (at **)',
+        'Warning: Unknown prop `foo` on <div> tag. Either remove this prop ' +
+          'from the element, or pass a string, number, or boolean value to keep ' +
+          'it in the DOM. For details, see https://fb.me/react-unknown-prop' +
+          '\n    in div (at **)',
       );
     });
 
@@ -159,8 +161,10 @@ describe('ReactDOMComponent', () => {
       ReactDOM.render(<div foo={() => {}} baz={{}} />, container);
       expectDev(console.error.calls.count(0)).toBe(1);
       expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(
-        'Warning: Unknown props `foo`, `baz` on <div> tag. Remove these props from the element. ' +
-          'For details, see https://fb.me/react-unknown-prop\n    in div (at **)',
+        'Warning: Unknown props `foo`, `baz` on <div> tag. Either remove these ' +
+          'props from the element, or pass a string, number, or boolean value to keep ' +
+          'them in the DOM. For details, see https://fb.me/react-unknown-prop' +
+          '\n    in div (at **)',
       );
     });
 

diff --git a/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js b/src/renderers/dom/shared/hooks/ReactDOMUnknownPropertyHook.js
@@ -117,7 +117,8 @@ var warnUnknownProperties = function(type, props, debugID) {
   if (unknownProps.length === 1) {
     warning(
       false,
-      'Unknown prop %s on <%s> tag. Remove this prop from the element. ' +
+      'Unknown prop %s on <%s> tag. Either remove this prop from the element, ' +
+        'or pass a string, number, or boolean value to keep it in the DOM. ' +
         'For details, see https://fb.me/react-unknown-prop%s',
       unknownPropString,
       type,
@@ -126,7 +127,8 @@ var warnUnknownProperties = function(type, props, debugID) {
   } else if (unknownProps.length > 1) {
     warning(
       false,
-      'Unknown props %s on <%s> tag. Remove these props from the element. ' +
+      'Unknown props %s on <%s> tag. Either remove these props from the element, ' +
+        'or pass a string, number, or boolean value to keep them in the DOM. ' +
         'For details, see https://fb.me/react-unknown-prop%s',
       unknownPropString,
       type,