Make invalid prop type warnings more specific if they are falsy

[sebmarkbage]

This is a common pattern:

<div onClick={condition && () => {}} className={condition && 'foo'} />

However if condition is false, 0 or "" then this correctly warns.

You should have used condition ? ... : undefined instead.

We could suggest that more specifically in the warning.

The longer term alternative is to use the proposed more concise ?? operator.

[NicBonetto]

I would like to take this issue on :) Just need a little direction as to where to start.

[gaearon]

Run the code above. See the emitted warning. Find it by message in the source. Then you can tweak the message to be more helpful. Does this help?

[NicBonetto]

Yes, thank you!

[alenkart]

Hi, I'm beginner too.

I think the warning is located on the line 5724 in the react-dom.development.js file, correct me if I'm wrong.

  if (typeof value === 'boolean') {
      warning$16(DOMProperty_1.shouldAttributeAcceptBooleanValue(name), 'Received `%s` for non-boolean attribute `%s`. If this is expected, cast ' + 'the value to a string.%s', value, name, getStackAddendum$2(debugID));
      warnedProperties$1[name] = true;
      return true;
    }

[NicBonetto]

That specific file is in your local node_modules directory when you install react-dom via npm.

[gaearon]

Yes. If you search the source code, though, you’ll find it here:

https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/ReactDOMUnknownPropertyHook.js

[NicBonetto]

Proposed fix. #11300

[gaearon]

Fixed by #11308.