Renders React components conditionally e.g. <If exp={ true }></If> to avoid inline short-circuit evaluation/ternary hell

If.jsx

/*
  Usage:
  <If exp={ true }> components to render </If>
  <If exp={ false }> components not to render </If>
*/
import React from "react";
import PropTypes from "prop-types";

export default class If extends React.Component {

    static propTypes = {
      exp: PropTypes.any,
      children: PropTypes.any
    }

    render() {
      // JavaScript is an eagearly evaluated language, so even if th exp
      const defer = () => this.props.children;
      return this.props.exp ? defer() : null;
    }
}