Added warning to <Context.Provider> in case no value prop is provided (#19054)
* added warning to context.provider in case no value prop * update message * updated message and pass undefined
Shailendra Gupta committed
Jul 1, 2020 at 00:20 UTC
f4097c1aef173ea0cb873bc18b47d1ef12bab4b3
6 files changed
+39
-4
packages/react-reconciler/src/ReactFiberBeginWork.new.js
+10
@@ -2804,6 +2804,8 @@ function updatePortalComponent(
2804
return workInProgress.child;
2805
}
2806
2807
+let hasWarnedAboutUsingNoValuePropOnContextProvider = false;
2808
+
2809
function updateContextProvider(
2810
current: Fiber | null,
2811
workInProgress: Fiber,
@@ -2818,6 +2820,14 @@ function updateContextProvider(
2820
const newValue = newProps.value;
2821
2822
if (__DEV__) {
2823
+ if (!('value' in newProps)) {
2824
+ if (!hasWarnedAboutUsingNoValuePropOnContextProvider) {
2825
+ hasWarnedAboutUsingNoValuePropOnContextProvider = true;
2826
+ console.error(
2827
+ 'The `value` prop is required for the `<Context.Provider>`. Did you misspell it or forget to pass it?',
2828
+ );
2829
+ }
2830
+ }
2831
const providerPropTypes = workInProgress.type.propTypes;
2832
2833
if (providerPropTypes) {
packages/react-reconciler/src/ReactFiberBeginWork.old.js
+10
@@ -2804,6 +2804,8 @@ function updatePortalComponent(
2804
return workInProgress.child;
2805
}
2806
2807
+let hasWarnedAboutUsingNoValuePropOnContextProvider = false;
2808
+
2809
function updateContextProvider(
2810
current: Fiber | null,
2811
workInProgress: Fiber,
@@ -2818,6 +2820,14 @@ function updateContextProvider(
2820
const newValue = newProps.value;
2821
2822
if (__DEV__) {
2823
+ if (!('value' in newProps)) {
2824
+ if (!hasWarnedAboutUsingNoValuePropOnContextProvider) {
2825
+ hasWarnedAboutUsingNoValuePropOnContextProvider = true;
2826
+ console.error(
2827
+ 'The `value` prop is required for the `<Context.Provider>`. Did you misspell it or forget to pass it?',
2828
+ );
2829
+ }
2830
+ }
2831
const providerPropTypes = workInProgress.type.propTypes;
2832
2833
if (providerPropTypes) {
packages/react-reconciler/src/__tests__/ReactNewContext-test.js
+16
-1
@@ -1083,6 +1083,21 @@ describe('ReactNewContext', () => {
1083
);
1084
});
1085
1086
+ it('warns if no value prop provided', () => {
1087
+ const Context = React.createContext();
1088
+
1089
+ ReactNoop.render(
1090
+ <Context.Provider anyPropNameOtherThanValue="value could be anything" />,
1091
+ );
1092
+
1093
+ expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
1094
+ 'The `value` prop is required for the `<Context.Provider>`. Did you misspell it or forget to pass it?',
1095
+ {
1096
+ withoutStack: true,
1097
+ },
1098
+ );
1099
+ });
1100
+
1101
it('warns if multiple renderers concurrently render the same context', () => {
1102
spyOnDev(console, 'error');
1103
const Context = React.createContext(0);
@@ -1611,7 +1626,7 @@ describe('ReactNewContext', () => {
1626
// caused by unwinding the context from wrong point.
1627
ReactNoop.render(
1628
<errorInCompletePhase>
1614
- <Context.Provider />
1629
+ <Context.Provider value={null} />
1630
</errorInCompletePhase>,
1631
);
1632
expect(Scheduler).toFlushAndThrow('Error in host config.');
packages/react-test-renderer/src/__tests__/ReactTestRenderer-test.internal.js
+1
-1
@@ -1012,7 +1012,7 @@ describe('ReactTestRenderer', () => {
1012
const Context = React.createContext(null);
1013
const Indirection = React.Fragment;
1014
const App = () => (
1015
- <Context.Provider>
1015
+ <Context.Provider value={null}>
1016
<Indirection>
1017
<Context.Consumer>{() => null}</Context.Consumer>
1018
</Indirection>
packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js
+1
-1
@@ -236,7 +236,7 @@ describe('ReactTestRendererTraversal', () => {
236
).toBe(2);
237
expect(
238
ReactTestRenderer.create(
239
- <Context.Provider>
239
+ <Context.Provider value={null}>
240
<div />
241
<div />
242
</Context.Provider>,
packages/react/src/__tests__/ReactContextValidator-test.js
+1
-1
@@ -263,7 +263,7 @@ describe('ReactContextValidator', () => {
263
264
class Component extends React.Component {
265
render() {
266
- return <TestContext.Provider />;
266
+ return <TestContext.Provider value={undefined} />;
267
}
268
}
269