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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed invalid prop types error message to be more specific #11308

Merged
merged 22 commits into from
Oct 31, 2017
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/react-dom/src/__tests__/ReactDOMAttribute-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ describe('ReactDOM unknown attribute', () => {
expectDev(
normalizeCodeLocInfo(console.error.calls.argsFor(0)[0]),
).toMatch(
'Warning: Received `true` for non-boolean attribute `unknown`. ' +
'If this is expected, cast the value to a string.\n' +
'Warning: Received `true` for non-boolean attribute `unknown`. If this is expected, cast ' +
Copy link
Collaborator

@gaearon gaearon Oct 26, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This change is unnecessary, right? It just reformats the message in a slightly less readable way.

'the value to a string.\n' +
' in div (at **)',
);
expectDev(console.error.calls.count()).toBe(1);
Expand Down
13 changes: 9 additions & 4 deletions packages/react-dom/src/__tests__/ReactDOMComponent-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2042,7 +2042,8 @@ describe('ReactDOMComponent', () => {
expect(el.hasAttribute('whatever')).toBe(false);

expectDev(console.error.calls.argsFor(0)[0]).toContain(
'Warning: Received `true` for non-boolean attribute `whatever`',
'Received `true` for non-boolean attribute `whatever`. If this is expected, cast ' +
Copy link
Collaborator

@gaearon gaearon Oct 26, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would look nicer if If this is expected... started on the new line in test.

'the value to a string.',
);
});

Expand All @@ -2055,7 +2056,8 @@ describe('ReactDOMComponent', () => {
expect(el.hasAttribute('whatever')).toBe(false);

expectDev(console.error.calls.argsFor(0)[0]).toContain(
'Warning: Received `true` for non-boolean attribute `whatever`',
'Received `true` for non-boolean attribute `whatever`. If this is expected, cast ' +
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same

'the value to a string.',
);
});

Expand Down Expand Up @@ -2230,7 +2232,8 @@ describe('ReactDOMComponent', () => {
expect(el.hasAttribute('whatever')).toBe(false);

expectDev(console.error.calls.argsFor(0)[0]).toContain(
'Warning: Received `true` for non-boolean attribute `whatever`.',
'Received `true` for non-boolean attribute `whatever`. If this is expected, cast ' +
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same

'the value to a string.',
);
});

Expand Down Expand Up @@ -2283,7 +2286,9 @@ describe('ReactDOMComponent', () => {

expectDev(console.error.calls.count()).toBe(1);
expectDev(console.error.calls.argsFor(0)[0]).toContain(
'Warning: Received `false` for non-boolean attribute `whatever`.',
'If you mean to conditionally pass an attribute, use a ternary ' +
'expression: `false`={condition ? value : undefined} instead of ' +
'{condition && value}.',
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does false={condition? value : undefined} mean? Why does it says false?

Please fix this to show the attribute name.

);
});
});
Expand Down
15 changes: 12 additions & 3 deletions packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,18 @@ if (__DEV__) {
return true;
}

if (typeof value === 'boolean') {
if (typeof value === 'boolean' && value === false) {
warning(
DOMProperty.shouldAttributeAcceptBooleanValue(name),
'If you mean to conditionally pass an attribute, use a ternary ' +
'expression: `%s`={condition ? value : undefined} instead of ' +
'{condition && value}.%s',
value,
getStackAddendum(),
);
warnedProperties[name] = true;
return true;
} else if (typeof value === 'boolean') {
warning(
DOMProperty.shouldAttributeAcceptBooleanValue(name),
'Received `%s` for non-boolean attribute `%s`. If this is expected, cast ' +
Expand All @@ -189,8 +200,6 @@ if (__DEV__) {
name,
getStackAddendum(),
);
warnedProperties[name] = true;
return true;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why was this removed?

}

// Now that we've validated casing, do not validate
Expand Down