Merge pull request #6341 from borisyankov/master

Add more information to warning 'Input elements must be either controlled or uncontrolled'
facebook · Apr 7, 2016 · 006058d · 006058d
2 parents 1dc7c58 + 1018e50
commit 006058d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/renderers/dom/client/wrappers/ReactDOMInput.js b/src/renderers/dom/client/wrappers/ReactDOMInput.js
@@ -91,6 +91,8 @@ var ReactDOMInput = {
         inst._currentElement._owner
       );
 
+      var owner = inst._currentElement._owner;
+
       if (props.valueLink !== undefined && !didWarnValueLink) {
         warning(
           false,
@@ -112,11 +114,14 @@ var ReactDOMInput = {
       ) {
         warning(
           false,
+          '%s contains an input of type %s with both checked and defaultChecked props. ' +
           'Input elements must be either controlled or uncontrolled ' +
           '(specify either the checked prop, or the defaultChecked prop, but not ' +
           'both). Decide between using a controlled or uncontrolled input ' +
           'element and remove one of these props. More info: ' +
-          'https://fb.me/react-controlled-components'
+          'https://fb.me/react-controlled-components',
+          owner && owner.getName() || 'A component',
+          props.type
         );
         didWarnCheckedDefaultChecked = true;
       }
@@ -127,11 +132,14 @@ var ReactDOMInput = {
       ) {
         warning(
           false,
+          '%s contains an input of type %s with both value and defaultValue props. ' +
           'Input elements must be either controlled or uncontrolled ' +
           '(specify either the value prop, or the defaultValue prop, but not ' +
           'both). Decide between using a controlled or uncontrolled input ' +
           'element and remove one of these props. More info: ' +
-          'https://fb.me/react-controlled-components'
+          'https://fb.me/react-controlled-components',
+          owner && owner.getName() || 'A component',
+          props.type
         );
         didWarnValueDefaultValue = true;
       }

diff --git a/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js b/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
@@ -422,6 +422,7 @@ describe('ReactDOMInput', function() {
       <input type="radio" checked={true} defaultChecked={true} readOnly={true} />
     );
     expect(console.error.argsForCall[0][0]).toContain(
+      'A component contains an input of type radio with both checked and defaultChecked props. ' +
       'Input elements must be either controlled or uncontrolled ' +
       '(specify either the checked prop, or the defaultChecked prop, but not ' +
       'both). Decide between using a controlled or uncontrolled input ' +
@@ -440,6 +441,7 @@ describe('ReactDOMInput', function() {
       <input type="text" value="foo" defaultValue="bar" readOnly={true} />
     );
     expect(console.error.argsForCall[0][0]).toContain(
+      'A component contains an input of type text with both value and defaultValue props. ' +
       'Input elements must be either controlled or uncontrolled ' +
       '(specify either the value prop, or the defaultValue prop, but not ' +
       'both). Decide between using a controlled or uncontrolled input ' +