Fixed invalid prop types error message to be more specific

packages/react-dom/src/__tests__/ReactDOMAttribute-test.js

@@ -54,8 +54,9 @@ 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`.\n\n' +
+ 'If you want `unknown` to appear in the DOM, cast it to a string. ' +
+ 'For example, you can pass `unknown="true"` or `unknown={value.toString()}` instead.\n' +
  ' in div (at **)',
  );
  expectDev(console.error.calls.count()).toBe(1);

packages/react-dom/src/__tests__/ReactDOMComponent-test.js

@@ -2042,7 +2042,9 @@ 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`.\n\n' +
+ 'If you want `whatever` to appear in the DOM, cast it to a string. ' +
+ 'For example, you can pass `whatever="true"` or `whatever={value.toString()}` instead.',
  );
  });
 
@@ -2055,7 +2057,9 @@ 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`.\n\n' +
+ 'If you want `whatever` to appear in the DOM, cast it to a string. ' +
+ 'For example, you can pass `whatever="true"` or `whatever={value.toString()}` instead.',
  );
  });
 
@@ -2230,7 +2234,9 @@ 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`.\n\n' +
+ 'If you want `whatever` to appear in the DOM, cast it to a string. ' +
+ 'For example, you can pass `whatever="true"` or `whatever={value.toString()}` instead.',
  );
  });
 
@@ -2283,7 +2289,12 @@ 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`.',
+ 'Received `false` for non-boolean attribute `whatever`.\n\n ' +
+ 'If you want `whatever` to appear in the DOM, cast it to a string. ' +
+ 'For example, you can pass `whatever="false"` or `whatever={value.toString()}.\n\n' +
+ 'If you want to omit `whatever` based on a condition, use a ternary expression. ' +
+ 'For example, you can pass `whatever={condition ? value : undefined}` ' +
+ 'instead of `whatever={condition && value}`.',
  );
  });
  });

packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js

@@ -180,15 +180,45 @@ if (__DEV__) {
  return true;
  }
 
- if (typeof value === 'boolean') {
- warning(
- DOMProperty.shouldAttributeAcceptBooleanValue(name),
- 'Received `%s` for non-boolean attribute `%s`. If this is expected, cast ' +
- 'the value to a string.%s',
- value,
- name,
- getStackAddendum(),
- );
+ if (
+ typeof value === 'boolean' &&
+ !DOMProperty.shouldAttributeAcceptBooleanValue(name)
+ ) {
+ if (value === true) {
+ warning(
+ false,
+ 'Received `%s` for non-boolean attribute `%s`.\n\n' +
+ 'If you want `%s` to appear in the DOM, cast it to a string. ' +
+ 'For example, you can pass `%s="%s"` or `%s={value.toString()}` instead.%s',
+ value,
+ name,
+ name,
+ name,
+ value,
+ name,
+ getStackAddendum(),
+ );
+ } else {
+ warning(
+ false,
+ 'Received `%s` for non-boolean attribute `%s`.\n\n ' +
+ 'If you want `%s` to appear in the DOM, cast it to a string. ' +
+ 'For example, you can pass `%s="%s"` or `%s={value.toString()}.\n\n' +
+ 'If you want to omit `%s` based on a condition, use a ternary expression. ' +
+ 'For example, you can pass `%s={condition ? value : undefined}` ' +
+ 'instead of `%s={condition && value}`.%s',
+ value,
+ name,
+ name,
+ name,
+ value,
+ name,
+ name,
+ name,
+ name,
+ getStackAddendum(),
+ );
+ }
  warnedProperties[name] = true;
  return true;
  }