From 1018e50a1a3c082431772faee259cf4a0bade509 Mon Sep 17 00:00:00 2001 From: Boris Yankov Date: Fri, 25 Mar 2016 16:36:48 +0200 Subject: [PATCH] Add more information to 'Input elements must be either controlled or uncontrolled' warning --- src/renderers/dom/client/wrappers/ReactDOMInput.js | 12 ++++++++++-- .../client/wrappers/__tests__/ReactDOMInput-test.js | 2 ++ 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/src/renderers/dom/client/wrappers/ReactDOMInput.js b/src/renderers/dom/client/wrappers/ReactDOMInput.js index e52c199b24..1e720db666 100644 --- a/src/renderers/dom/client/wrappers/ReactDOMInput.js +++ b/src/renderers/dom/client/wrappers/ReactDOMInput.js @@ -92,6 +92,8 @@ var ReactDOMInput = { inst._currentElement._owner ); + var owner = inst._currentElement._owner; + if (props.valueLink !== undefined && !didWarnValueLink) { warning( false, @@ -113,11 +115,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; } @@ -128,11 +133,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 index a42227bb97..ace7f4d0a2 100644 --- 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() { ); 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() { ); 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 ' +