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

Author: Shailendra Gupta

packages/react-reconciler/src/ReactFiberBeginWork.new.js

@@ -2804,6 +2804,8 @@ function updatePortalComponent(
   return workInProgress.child;
 }
 
+let hasWarnedAboutUsingNoValuePropOnContextProvider = false;
+
 function updateContextProvider(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -2818,6 +2820,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 `<Context.Provider>`. Did you misspell it or forget to pass it?',
+        );
+      }
+    }
     const providerPropTypes = workInProgress.type.propTypes;
 
     if (providerPropTypes) {

packages/react-reconciler/src/ReactFiberBeginWork.old.js

@@ -2804,6 +2804,8 @@ function updatePortalComponent(
   return workInProgress.child;
 }
 
+let hasWarnedAboutUsingNoValuePropOnContextProvider = false;
+
 function updateContextProvider(
   current: Fiber | null,
   workInProgress: Fiber,
@@ -2818,6 +2820,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 `<Context.Provider>`. Did you misspell it or forget to pass it?',
+        );
+      }
+    }
     const providerPropTypes = workInProgress.type.propTypes;
 
     if (providerPropTypes) {

packages/react-reconciler/src/__tests__/ReactNewContext-test.js

@@ -1083,6 +1083,21 @@ describe('ReactNewContext', () => {
       );
     });
 
+    it('warns if no value prop provided', () => {
+      const Context = React.createContext();
+
+      ReactNoop.render(
+        <Context.Provider anyPropNameOtherThanValue="value could be anything" />,
+      );
+
+      expect(() => expect(Scheduler).toFlushWithoutYielding()).toErrorDev(
+        'The `value` prop is required for the `<Context.Provider>`. 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);
@@ -1611,7 +1626,7 @@ describe('ReactNewContext', () => {
     // caused by unwinding the context from wrong point.
     ReactNoop.render(
       <errorInCompletePhase>
-        <Context.Provider />
+        <Context.Provider value={null} />
       </errorInCompletePhase>,
     );
     expect(Scheduler).toFlushAndThrow('Error in host config.');

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 = () => (
-      <Context.Provider>
+      <Context.Provider value={null}>
         <Indirection>
           <Context.Consumer>{() => null}</Context.Consumer>
         </Indirection>

packages/react-test-renderer/src/__tests__/ReactTestRendererTraversal-test.js

@@ -236,7 +236,7 @@ describe('ReactTestRendererTraversal', () => {
     ).toBe(2);
     expect(
       ReactTestRenderer.create(
-        <Context.Provider>
+        <Context.Provider value={null}>
           <div />
           <div />
         </Context.Provider>,

packages/react/src/__tests__/ReactContextValidator-test.js

@@ -263,7 +263,7 @@ describe('ReactContextValidator', () => {
 
     class Component extends React.Component {
       render() {
-        return <TestContext.Provider />;
+        return <TestContext.Provider value={undefined} />;
       }
     }