render() {
    return (
        <div>
            <Header />
            {this.renderBody()}
            <Footer />
        </div>
    );
},
 
renderBody() {
    return (this.props.age >= this.props.drinkingAge)
        ? <span class="ok">Have a beer, {this.props.name}!</span>
        : <span class="not-ok">Sorry {this.props.name } you are not old enough.</span>;
}

render() {
    return (
        <div>
            <Header />
            <If condition={ this.props.age >= this.props.drinkingAge }>
                <Then>
                    <span class="ok">Have a beer, {this.props.name}!</span>
                </Then>
                <Else>
                    <span>Sorry, {this.props.name}, you are not old enough.</span>
                </Else>
            </If>
            <Footer />
        </div>
    );
}

import React from 'react';
import { If, Then, Else } from 'react-then-else';
 
class Beer extends React.Component {
 
    render() {
        return (
            <div>
                <If condition={ this.props.age >= 16 } tag='header'>
                    <Then>Have a beer, {this.props.name}!</Then>
                    <Else style={{textAlign: 'center'}} onClick={this.onElseClick}>
                        <span>Sorry, {this.props.name}, you are not old enough.</span>
                        <div>
                            <p>One more</p>
                            <If condition={ this.props.age >= 15 }>
                                <Then>You are 15 years old</Then>
                            </If>
                        </div>
                    </Else>
                    <p>You always see me!</p>
                </If>
            </div>
        );
    }
 
});

// ES2015
import { If, Then, Else } from 'react-then-else';
 
// CommonJS:
const { If, Then, Else } = require('react-then-else');