React: Make invalid prop type warnings more specific if they are falsy

Created on 19 Oct 2017 · 8Comments · Source: facebook/react

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.

DOM starter good first issue (taken)

Source

sebmarkbage

👍2

Most helpful comment

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?

gaearon on 19 Oct 2017

👍6

All 8 comments

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

NicBonetto on 19 Oct 2017

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?

gaearon on 19 Oct 2017

👍6

Yes, thank you!

NicBonetto on 19 Oct 2017

👍1

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;
    }