Allow non-booleans in the condition prop as a convenience

[hcharley]

I see a lot of these warnings:

Warning: Failed prop type: Invalid prop `children` supplied to `If`.

Because I will have conditions that look like:

<When condition={state.data && state.data.myProfile}>
  My profile loaded!
</When>

With state.data.myProfile being an object that might look like:

{
  "id": 123,
  "name": "Joe",
  "email": "[email protected]"
}

Which means that I have to do this to silence warnings:

<When condition={!!(state.data && state.data.myProfile)}>
  My profile loaded!
</When>

Or:

<When condition={state.data && state.data.myProfile && true}>
  My profile loaded!
</When>

Both of these solutions seems solvable if react-if accepted non-boolean conditions.

null and undefined or anything non-truthy would be evaluated to a false.

[romac]

In case you are already using Babel to compile your JSX to JavaScript, may I suggest looking into Babel's optional chaining plugin as an alternative to relaxing the prop types?

This would let you write the following instead:

<When condition={state.data?.myProfile != null}>
  My profile loaded!
</When>

[Undeadlol1]

Please. This would be awesome.
In my particular case i use create-react-app and adding babel plugins is not an option.
Also, i don't really see the reason why this components shouldn't work as an ordinary javascript "if" statement.
Manually converting to booleans is inconvenient.

[romac]

@Undeadlol1 Alright! I concede this could be convenient :) I cannot work on this at the moment, but feel free to send a PR with some test cases and I'll merge it.

[dehimer]

Yes, I set !! almost in all conditionals.

[isuvorov]

+1 -- Still actual

[favna]

This is fixed with #66 which switches the code from JavaScript using prop-types to TypeScript. Now this doesn't mean that you have to write TypeScript yourself, but PropTypes won't complain anymore about not providing a non boolean value. The new type of condition is:

export type BooleanLike = boolean | string | number | null | undefined;

// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface ComponentWithConditionProps
  extends PropsWithChildren<{
    condition: (() => BooleanLike) | BooleanLike;
  }> {}

This means it can be boolean, string, number, null, undefined, () => boolean, () => string, () => number, () => null, or () => undefined