ternary.js

const PurchaseComplete = (props) => 
  (<div className="purchase-complete">
      <h2>Thanks!</h2>
      <p>
        Thank you for your purchase of {formatPrice(this.state.total)}.
        We’ll send you a receipt shortly.
      </p>
      <p>
        <button
          className="cta-button outlined-button"
          onClick={() => this.replaceState(this.getInitialState())}
        >
          Buy more tickets
        </button>
      </p>
    </div>)
const PromoAvailable = (props) => 
  (<PurchaseBlock
      price={promo}
      regularPrice={regular}
      title={`Promo: ${query.c}`}
      getAvailableSeats={() => getAvailableSeatsWithPromo(training, promo)}
      onPurchase={this.purchaseWithPromo}
    />)
const EarlyBirdAvailable = (props) => 
  (<PurchaseBlock
      price={earlyBird}
      regularPrice={regular}
      title="Early Bird Price"
      getAvailableSeats={() => getAvailableSeats(training)}
      onPurchase={this.purchaseEarlyBird}
    />)
const PurchaseBlock = (props) => 
  (<PurchaseBlock
      price={regular}
      title="Ticket Price"
      getAvailableSeats={() => getAvailableSeats(training)}
      onPurchase={this.purchaseRegular}
    />)


render(){
  // or a bit fancier/cleaner, a self-executing function w/ a switch that returns a stateless component 
  return <div className="pricing" style={{ opacity: purchasing ? 0.25 : '' }}>
    {(props => {
      switch(props.enum){
        case "PurchaseComplete": 
          return <PurchaseComplete {...props} />
      
        case "PromoAvailable":
          return <PromoAvailable {...props} />
      
        case "EarlyBirdAvailable":
          return <EarlyBirdAvailable {...props} />
      
        default:
          return <PurchaseBlock {...props} />
      }
  })(this.props)}
  </div>
}