diff --git a/src/core/ReactCompositeComponent.js b/src/core/ReactCompositeComponent.js index 26c31d060b..d9693ee2bd 100644 --- a/src/core/ReactCompositeComponent.js +++ b/src/core/ReactCompositeComponent.js @@ -385,6 +385,15 @@ var RESERVED_SPEC_KEYS = { } }; +function getDeclarationErrorAddendum(component) { + var owner = component._owner || null; + if (owner && owner.constructor && owner.constructor.displayName) { + return ' Check the render method of `' + owner.constructor.displayName + + '`.'; + } + return ''; +} + function validateTypeDef(Constructor, typeDef, location) { for (var propName in typeDef) { if (typeDef.hasOwnProperty(propName)) { @@ -967,7 +976,11 @@ var ReactCompositeComponentMixin = { var error = propTypes[propName](props, propName, componentName, location); if (error instanceof Error) { - warning(false, error.message); + // We may want to extend this logic for similar errors in + // renderComponent calls, so I'm abstracting it away into + // a function to minimize refactoring in the future + var addendum = getDeclarationErrorAddendum(this); + warning(false, error.message + addendum); } } } diff --git a/src/core/__tests__/ReactCompositeComponent-test.js b/src/core/__tests__/ReactCompositeComponent-test.js index 4fe1053799..c0738e6ef3 100644 --- a/src/core/__tests__/ReactCompositeComponent-test.js +++ b/src/core/__tests__/ReactCompositeComponent-test.js @@ -110,6 +110,31 @@ describe('ReactCompositeComponent', function() { console.warn = warn; }); + it('should give context for PropType errors in nested components.', () => { + // In this test, we're making sure that if a proptype error is found in a + // component, we give a smal hint as to which parent instantiated that + // component as per warnings about key-usage in ReactDescriptorValidator. + spyOn(console, 'warn'); + var MyComp = React.createClass({ + propTypes: { + color: ReactPropTypes.string + }, + render: function() { + return