{"parents":["6f28ecf0cb6630050cdae022b54dd0e6b75e1634"],"body":"* Warn about unresolved function as a child\r\n\r\n* Oops","patch":"diff --git a\/src\/renderers\/__tests__\/ReactComponent-test.js b\/src\/renderers\/__tests__\/ReactComponent-test.js\nindex dbea2bd3dc..a5f5ce287f 100644\n--- a\/src\/renderers\/__tests__\/ReactComponent-test.js\n+++ b\/src\/renderers\/__tests__\/ReactComponent-test.js\n@@ -14,9 +14,10 @@\n var React;\n var ReactDOM;\n var ReactDOMServer;\n-var ReactDOMFeatureFlags;\n var ReactTestUtils;\n \n+var ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');\n+\n describe('ReactComponent', () => {\n function normalizeCodeLocInfo(str) {\n return str && str.replace(\/\\(at .+?:\\d+\\)\/g, '(at **)');\n@@ -26,7 +27,6 @@ describe('ReactComponent', () => {\n React = require('react');\n ReactDOM = require('react-dom');\n ReactDOMServer = require('react-dom\/server');\n- ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');\n ReactTestUtils = require('react-dom\/test-utils');\n });\n \n@@ -493,4 +493,78 @@ describe('ReactComponent', () => {\n ' in Foo (at **)',\n );\n });\n+\n+ if (ReactDOMFeatureFlags.useFiber) {\n+ describe('with new features', () => {\n+ beforeEach(() => {\n+ require('ReactFeatureFlags').disableNewFiberFeatures = false;\n+ });\n+\n+ it('warns on function as a return value from a function', () => {\n+ function Foo() {\n+ return Foo;\n+ }\n+ spyOn(console, 'error');\n+ var container = document.createElement('div');\n+ ReactDOM.render(, container);\n+ expectDev(console.error.calls.count()).toBe(1);\n+ expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(\n+ 'Warning: Functions are not valid as a React child. This may happen if ' +\n+ 'you return a Component instead of from render. ' +\n+ 'Or maybe you meant to call this function rather than return it.\\n' +\n+ ' in Foo (at **)',\n+ );\n+ });\n+\n+ it('warns on function as a return value from a class', () => {\n+ class Foo extends React.Component {\n+ render() {\n+ return Foo;\n+ }\n+ }\n+ spyOn(console, 'error');\n+ var container = document.createElement('div');\n+ ReactDOM.render(, container);\n+ expectDev(console.error.calls.count()).toBe(1);\n+ expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(\n+ 'Warning: Functions are not valid as a React child. This may happen if ' +\n+ 'you return a Component instead of from render. ' +\n+ 'Or maybe you meant to call this function rather than return it.\\n' +\n+ ' in Foo (at **)',\n+ );\n+ });\n+\n+ it('warns on function as a child to host component', () => {\n+ function Foo() {\n+ return

{Foo}<\/span><\/div>;\n+ }\n+ spyOn(console, 'error');\n+ var container = document.createElement('div');\n+ ReactDOM.render(, container);\n+ expectDev(console.error.calls.count()).toBe(1);\n+ expectDev(normalizeCodeLocInfo(console.error.calls.argsFor(0)[0])).toBe(\n+ 'Warning: Functions are not valid as a React child. This may happen if ' +\n+ 'you return a Component instead of from render. ' +\n+ 'Or maybe you meant to call this function rather than return it.\\n' +\n+ ' in span (at **)\\n' +\n+ ' in div (at **)\\n' +\n+ ' in Foo (at **)',\n+ );\n+ });\n+\n+ it('does not warn for function-as-a-child that gets resolved', () => {\n+ function Bar(props) {\n+ return props.children();\n+ }\n+ function Foo() {\n+ return {() => 'Hello'}<\/Bar>;\n+ }\n+ spyOn(console, 'error');\n+ var container = document.createElement('div');\n+ ReactDOM.render(, container);\n+ expect(container.innerHTML).toBe('Hello');\n+ expectDev(console.error.calls.count()).toBe(0);\n+ });\n+ });\n+ }\n });\ndiff --git a\/src\/renderers\/shared\/fiber\/ReactChildFiber.js b\/src\/renderers\/shared\/fiber\/ReactChildFiber.js\nindex 461ddd79ea..9a4157b13e 100644\n--- a\/src\/renderers\/shared\/fiber\/ReactChildFiber.js\n+++ b\/src\/renderers\/shared\/fiber\/ReactChildFiber.js\n@@ -200,6 +200,16 @@ function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) {\n }\n }\n \n+function warnOnFunctionType() {\n+ warning(\n+ false,\n+ 'Functions are not valid as a React child. This may happen if ' +\n+ 'you return a Component instead of from render. ' +\n+ 'Or maybe you meant to call this function rather than return it.%s',\n+ getCurrentFiberStackAddendum() || '',\n+ );\n+}\n+\n \/\/ This wrapper function exists because I expect to clone the code in each path\n \/\/ to be able to optimize each path individually by branching early. This needs\n \/\/ a compiler or we can do it manually. Helpers that don't need this branching\n@@ -565,6 +575,13 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {\n throwOnInvalidObjectType(returnFiber, newChild);\n }\n \n+ if (__DEV__) {\n+ const disableNewFiberFeatures = ReactFeatureFlags.disableNewFiberFeatures;\n+ if (!disableNewFiberFeatures && typeof newChild === 'function') {\n+ warnOnFunctionType();\n+ }\n+ }\n+\n return null;\n }\n \n@@ -638,6 +655,13 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {\n throwOnInvalidObjectType(returnFiber, newChild);\n }\n \n+ if (__DEV__) {\n+ const disableNewFiberFeatures = ReactFeatureFlags.disableNewFiberFeatures;\n+ if (!disableNewFiberFeatures && typeof newChild === 'function') {\n+ warnOnFunctionType();\n+ }\n+ }\n+\n return null;\n }\n \n@@ -697,6 +721,13 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {\n throwOnInvalidObjectType(returnFiber, newChild);\n }\n \n+ if (__DEV__) {\n+ const disableNewFiberFeatures = ReactFeatureFlags.disableNewFiberFeatures;\n+ if (!disableNewFiberFeatures && typeof newChild === 'function') {\n+ warnOnFunctionType();\n+ }\n+ }\n+\n return null;\n }\n \n@@ -1418,6 +1449,11 @@ function ChildReconciler(shouldClone, shouldTrackSideEffects) {\n throwOnInvalidObjectType(returnFiber, newChild);\n }\n \n+ if (__DEV__) {\n+ if (!disableNewFiberFeatures && typeof newChild === 'function') {\n+ warnOnFunctionType();\n+ }\n+ }\n if (!disableNewFiberFeatures && typeof newChild === 'undefined') {\n \/\/ If the new child is undefined, and the return fiber is a composite\n \/\/ component, throw an error. If Fiber return types are disabled,\n","commit":{"authorName":"Dan Abramov","authorEmail":"dan.abramov@gmail.com","authoredAt":"2017-08-04T15:51:47+01:00","revision":"efa71484b334153958d8a0f35310c3c4ee72c731","shortRevision":"efa71484b3","subject":"Warn about unresolved function as a child (#10376)"},"files":[{"path":"src\/renderers\/__tests__\/ReactComponent-test.js","status":"M"},{"path":"src\/renderers\/shared\/fiber\/ReactChildFiber.js","status":"M"}]}

dillon1000/react

Files changed