diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js index 21c0835a33c8..54ed79bcb098 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js @@ -2795,6 +2795,8 @@ function updatePortalComponent( return workInProgress.child; } +let hasWarnedAboutUsingNoValuePropOnContextProvider = false; + function updateContextProvider( current: Fiber | null, workInProgress: Fiber, @@ -2809,6 +2811,14 @@ function updateContextProvider( const newValue = newProps.value; if (__DEV__) { + if (!('value' in newProps)) { + if (!hasWarnedAboutUsingNoValuePropOnContextProvider) { + hasWarnedAboutUsingNoValuePropOnContextProvider = true; + console.error( + 'The `value` prop is required for the ``. Did you misspell it or forget to pass it?', + ); + } + } const providerPropTypes = workInProgress.type.propTypes; if (providerPropTypes) { diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js index 2d2916ac7776..3b4678f7a9b4 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js @@ -2792,6 +2792,8 @@ function updatePortalComponent( return workInProgress.child; } +let hasWarnedAboutUsingNoValuePropOnContextProvider = false; + function updateContextProvider( current: Fiber | null, workInProgress: Fiber, @@ -2806,6 +2808,14 @@ function updateContextProvider( const newValue = newProps.value; if (__DEV__) { + if (!('value' in newProps)) { + if (!hasWarnedAboutUsingNoValuePropOnContextProvider) { + hasWarnedAboutUsingNoValuePropOnContextProvider = true; + console.error( + 'The `value` prop is required for the ``. Did you misspell it or forget to pass it?', + ); + } + } const providerPropTypes = workInProgress.type.propTypes; if (providerPropTypes) { diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js index 52e2ce02df24..bbf7609ca2b2 100644 --- a/packages/react-reconciler/src/__tests__/ReactNewContext-test.js +++ b/packages/react-reconciler/src/__tests__/ReactNewContext-test.js @@ -1089,6 +1089,21 @@ describe('ReactNewContext', () => { ); }); + it('warns if no value prop provided', () => { + const Context = React.createContext(); + + ReactNoop.render( + , + ); + + expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev( + 'The `value` prop is required for the ``. Did you misspell it or forget to pass it?', + { + withoutStack: true, + }, + ); + }); + it('warns if multiple renderers concurrently render the same context', () => { spyOnDev(console, 'error'); const Context = React.createContext(0); @@ -1617,7 +1632,7 @@ describe('ReactNewContext', () => { // caused by unwinding the context from wrong point. ReactNoop.render( - + , ); expect(Scheduler).toFlushAndThrow('Error in host config.'); diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js index 06f7131f2bd5..a193e3739022 100644 --- a/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js +++ b/packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js @@ -1012,7 +1012,7 @@ describe('ReactTestRenderer', () => { const Context = React.createContext(null); const Indirection = React.Fragment; const App = () => ( - + {() => null} diff --git a/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js b/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js index 7c9925481699..8780d6e63f54 100644 --- a/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js +++ b/packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js @@ -236,7 +236,7 @@ describe('ReactTestRendererTraversal', () => { ).toBe(2); expect( ReactTestRenderer.create( - +
, diff --git a/packages/react/src/__tests__/ReactContextValidator-test.js b/packages/react/src/__tests__/ReactContextValidator-test.js index 2a4f5a8c3e84..f3fc8875c79b 100644 --- a/packages/react/src/__tests__/ReactContextValidator-test.js +++ b/packages/react/src/__tests__/ReactContextValidator-test.js @@ -263,7 +263,7 @@ describe('ReactContextValidator', () => { class Component extends React.Component { render() { - return ; + return ; } }