react-conditions-pure-js.jsx

//////////////////////////////////////////////////////////////////////
// Proposal for doing in-template (JSX) conditions. This can be done
// with components (e.g. https://www.npmjs.com/package/react-if) but
// I think the cognitive separation of logic & markup is important.
// It feels a little less noisy to me too.
//
// Naming, code-style & even some of the intra-JS semantics could be
// changed but this shows off what's possible. Style-wise I like
// having the `then` (vs not as in the `case` example), and I like
// the inline style used for `elsif` over the stacked style used
// for `case`. But these things are subjective.
//////////////////////////////////////////////////////////////////////

import React, { Component, Fragment } from "react";
import { If, Switch } from "react-pure-js-conditions";

export class LunchChoices extends Component {
  render() {
    return <div>
      {/********************************************************
       * If Statement (if/elsif/else)
       *
       * The use of `then` could be replaced by allowing `if`
       * and `elsif` to simply take a second argument.
       ********************************************************/}

      {If( this.props.choosePizza ).then(
        <div>
          <h3>Pizza</h3>
          <p>Pizza is seriously t3h best.</p>
        </div>
      ).elsif( this.props.chooseBurgers ).then(
        <div>
          <h3>Hamburgers</h3>
          <p>Burgers are pretty good, esp. with fries</p>
        </div>
      ).else(
        <div>
          <h3>Anything</h3>
          <p>I'll eat anything. Really.</p>
        </div>
      )}

      {/********************************************************
       * Switch Statement (switch/case/default)
       *
       * Here we're using a second argument on `case` instead
       * of a `then` or `do` or similar.
       ********************************************************/}

      {Switch( this.props.whichFood )
        .case("pizza",
          <div>
            <h3>Pizza</h3>
            <p>Pizza is seriously t3h best.</p>
          </div>
        )
        .case("burgers",
          <div>
            <h3>Hamburgers</h3>
            <p>Burgers are pretty good, esp. with fries</p>
          </div>
        )
        .default(
          <div>
            <h3>Anything</h3>
            <p>I'll eat anything. Really.</p>
          </div>
        )
      }
    
    </div>;
  }
}