If/Else does not catch all scenarios

[jonfairbanks]

I have ran into a scenario that react-if doesn't seem to handle appropriately.

console.log(this.props.ticket); // Output = null

<If condition={this.props.ticket === 'null' || null}>
    <Then>
        <div id="noData" style={style.noData}>
            No details found for the given ticket
        </div>
    </Then>
    <Else>
        {this.props.ticket.map(function(data,i) {
            return (
                // Do something with this.props.ticket here
            )
        }, this)}
    </Else>
</If>

In my case, I have a props which has been verified to be equal to null. As seen above, I have created an if condition to not show data if the props is null.

However, regardless of this logic, the this.props.ticket.map inside <Else> is run in all cases. This then leads to a TypeError: Cannot read property 'map' of null error which prevents our app from rendering.

[lowiebenoot]

Shouldn't it be
<If condition={this.props.ticket === 'null' || this.props.ticket === null}>?

[jonfairbanks]

I had tried swapping 'null' and null, and now have spelled each out completely as suggested above, but the behavior is the same. Map() is ran in all cases and output of this.props.ticket is verified to still equal null.

[romac]

@jonfairbanks Sorry for the late reply. This happens because React eagerly evaluates all children, which means that even if the condition is falsy, the code inside of the Else branch will also be evaluated (but won't be rendered). You can take a look at issues #4 and #1 for more information.

To work around that, you can wrap the children of the Else branch in an anonymous function like so:

<If condition={this.props.ticket === null}>
    <Then>
        <div id="noData" style={style.noData}>
            No details found for the given ticket
        </div>
    </Then>
    <Else>{function() {
        return this.props.ticket.map(function(data,i) {
            return (
                // Do something with this.props.ticket here
            )
        }, this)
    }}</Else>
</If>

I will soon update the README to both warn again against that issue and emphasize the solution above.

[romac]

@jonfairbanks I'm closing the issue, feel free to re-open it if needed.

[jonfairbanks]

Ah, I was not aware of that. Will try moving the logic into a function. Thanks @romac!

[jonfairbanks]

@romac: Unfortunately the function approach still does not catch this use-case. (I do not have the option to re-open this issue.)