Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added warning to <Context.Provider> in case no value prop is provided #19054

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
10 changes: 10 additions & 0 deletions packages/react-reconciler/src/ReactFiberBeginWork.new.js
Expand Up @@ -2795,6 +2795,8 @@ function updatePortalComponent(
return workInProgress.child;
}

let hasWarnedAboutUsingNoValuePropOnContextProvider = false;

function updateContextProvider(
current: Fiber | null,
workInProgress: Fiber,
Expand All @@ -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 `<Context.Provider>`. Did you misspell it or forget to pass it?',
);
}
}
const providerPropTypes = workInProgress.type.propTypes;

if (providerPropTypes) {
Expand Down
10 changes: 10 additions & 0 deletions packages/react-reconciler/src/ReactFiberBeginWork.old.js
Expand Up @@ -2792,6 +2792,8 @@ function updatePortalComponent(
return workInProgress.child;
}

let hasWarnedAboutUsingNoValuePropOnContextProvider = false;

function updateContextProvider(
current: Fiber | null,
workInProgress: Fiber,
Expand All @@ -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 `<Context.Provider>`. Did you misspell it or forget to pass it?',
);
}
}
const providerPropTypes = workInProgress.type.propTypes;

if (providerPropTypes) {
Expand Down
17 changes: 16 additions & 1 deletion packages/react-reconciler/src/__tests__/ReactNewContext-test.js
Expand Up @@ -1089,6 +1089,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);
Expand Down Expand Up @@ -1617,7 +1632,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.');
Expand Down
Expand Up @@ -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>
Expand Down
Expand Up @@ -236,7 +236,7 @@ describe('ReactTestRendererTraversal', () => {
).toBe(2);
expect(
ReactTestRenderer.create(
<Context.Provider>
<Context.Provider value={null}>
<div />
<div />
</Context.Provider>,
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/__tests__/ReactContextValidator-test.js
Expand Up @@ -263,7 +263,7 @@ describe('ReactContextValidator', () => {

class Component extends React.Component {
render() {
return <TestContext.Provider />;
return <TestContext.Provider value={undefined} />;
}
}

Expand Down