reactjs-if-else-help

var monthly_plans = [
    {
        "id": "plus-monthly",
        "name": "Plus",
        "billing_cycle": "monthly",
        "period_length": "months_1",
        "monthly_price": 6.0,
        "total_price": 6.0,
        "selected": false,
        "disabled": false,
        "noOfUsers": 1,
        "referrer": null,
        "features": [
            "Email Templates",
            "3 Apps",
            "Unlimited Usage",
            "1 User"
        ]
    },
    {
        "id": "premium-monthly",
        "name": "Premium",
        "billing_cycle": "monthly",
        "period_length": "months_1",
        "monthly_price": 9.0,
        "total_price": 9.0,
        "selected": true,
        "disabled": false,
        "noOfUsers": 1,
        "referrer": null,
        "features": [
            "Email Templates",
            "Unlimited Apps",
            "Unlimited Usage",
            "Team Management"
        ]
    }
];

var PlanItem = React.createClass({
    getInitialState: function(){
        return {};
    },
    render: function() {
        // FIXME: Use IF-ELSE in JSX?
        // TODO: Refactor
        if (this.props.plan.id !=="enterprise") {
          if (this.props.plan.disabled) {
              return (
                <div className="col-md-3">
                <div className="plan-item disabled">
                  <div className="plan-info">
                    <h2 className="plan-name">{ this.props.plan.name }</h2>
                    <FeatureList data={this.props.plan.features } />
                    <h2 className="plan-unit-price">${this.props.plan.monthly_price}</h2>
                    <p>per user / per month</p>
                    <p>(billed {this.props.plan.billing_cycle})</p>
                  </div>
                </div>
                </div>
              );
          } else {
              if (this.props.plan.selected) {
              return (
                <div className="col-md-3">
                <div className="plan-item selectable selected" id={this.props.plan.id} onClick={this.props.onClickHandler}>
                  <div className="plan-info">
                    <h2 className="plan-name">{ this.props.plan.name }</h2>
                    <FeatureList data={this.props.plan.features } />
                    <h2 className="plan-unit-price">${this.props.plan.monthly_price}</h2>
                    <p>per user / per month</p>
                    <p>(billed {this.props.plan.billing_cycle})</p>
                  </div>
                </div>
                </div>
              );
              } else {
              return (
                <div className="col-md-3">
                <div className="plan-item selectable" id={this.props.plan.id} onClick={this.props.onClickHandler}>
                  <div className="plan-info">
                    <h2 className="plan-name">{ this.props.plan.name }</h2>
                    <FeatureList data={this.props.plan.features } />
                    <h2 className="plan-unit-price">${this.props.plan.monthly_price}</h2>
                    <p>per user / per month</p>
                    <p>(billed {this.props.plan.billing_cycle})</p>
                  </div>
                </div>
                </div>
              );
              }
          }
        } else {
          return (
            <div className="col-md-3">
            <div className="plan-item" id={this.props.plan.id}>
              <div className="plan-info">
                <h2 className="plan-name">{ this.props.plan.name }</h2>
                <FeatureList data={this.props.plan.features } />
              </div>
            </div>
            </div>
          );
        }
    }
});

render() {
  if (this.props.plan.id === "enterprise")
    return this.renderEnterprise();
  else
    return this.renderOther();
}

and

var selected = this.props.plan.disabled ? "selected" : "";
return <div className={"plan-item selectable " + selected}>...</div>;

also http://npmjs.com/classnames

also for if-thens:

return (<div>
  {this.props.user.role === 'admin' ? (
    <h3>Admin user</h3>
  ):(
    <h3>Normal guy</h3>
  )}
</div>);

Thanks for the refactoring suggestions @rstacruz. :-)