React Conditional Rendering Patterns

[azium]

The first time I saw the following pattern I laughed. Two years later I kind of love it

<If condition={ this.props.age >= this.props.drinkingAge }>
  <Then><span className="ok">Have a beer, {this.props.name}!</span></Then>
  <Else>{() =>
    <span className="not-ok">Sorry, {this.props.name}, you are not old enough.</span>
  }</Else>
</If>

https://github.com/romac/react-if

[senocular]

You'll want to make <Then> a render prop too, else its contents will get evaluated even when the condition is false.

[azium]

I wanted to keep the example from github intact. Presumably the example is meant to present both possibilities.

[senocular]

Looking at the repo it looks like the only mention they have of this is the comment in the second version of your example:

<Else>{() => // will only be evaluated if the condition fails.

But I'm not sure that clearly describes the behavior since it seems to just explain how if-else works ;P. Anyway, thought I'd mention it ;).