Angular to React | Logo
 

What's the Equivalent of an ng-if Directive in a React Component?

Hate paperwork but love getting paid? Invoice Like a Boss

While there’s no direct correlation to Angular’s ng-if directive, you have several options available to you depending on the scenario you’re trying to cover. Keep reading below for code samples and a JSFiddle.

AngularJS allows you to easily remove an include or exclude an element from the DOM based on the truthiness of an expression. This is different than ng-show or ng-hide which only toggle the visibility of a DOM element. Using ng-if will completely remove the element from the DOM if the expression evaluates to false. Here`s a chunk of sample code to refresh your memory.

AngularJS Code Sample for ng-if

First, define a $scope variable with a value that evaluates to true or false.

$scope.showMe = false

Then, in your Angular view, add an ng-if attribute to a DOM element and assign your $scope variable as its value.

<div ng-if="showMe">
  I am only included in the DOM if $scope.showMe evaluates to true.
</div>

React Alternative to ng-if

As I mentioned above, even though there’s no direct correlation to ng-if in React, you have several options as your disposal depending on what you’re trying to accomplish.

Option 1: Use if : If you have an either/or scenario where you either want to display an element or not, this is probably the simplest to code:

var IfDemoComponent = React.createClass({
  render: function() {
    var el = null;
    if (this.props.showMe) {
      el = (
        <div>
          I am only included in the DOM if this.props.showMe evaluates to true.
        </div>
      );
    }
    return el;
  }
});

Option 2: Use switch : If you’re familiar with the nuances between if and switch in native Javascript code, then this option has probably already occurred to you. But, I want to list it here for the sake of clarity.

var SwitchDemoComponent = React.createClass({
  render: function() {
    var el = null;
    switch(this.props.showMe) {
      case 1:
        el = (<div>One</div>);
        break;
      case 2:
        el = (<div>Two</div>);
        break;
      case 3:
        el = (<div>Three</div>);
        break;
    }
    return el;
  }
});

Option 3: Use an IIFE (immediately-invoked function expression) : If you prefer an inline-style syntax inside your JSX, this may be a preferable option for you. Just be careful you don’t sacrifice readability for brevity (or the illusion of brevity).

var IIFEDemoComponent = React.createClass({
  render: function() {
    return (
      <div>
        {(function(showMe) {
          if (showMe) {
            return (<div>IIFE's are cool</div>);
          }
        })(this.props.showMe)}
      </div>
    );
  }
});

With a little creativity, you can use a wide variety of arrangements using if or switch blocks to either inlucde or exclude DOM elements in your React component. So have fun, but be sure to write readable code that can be easily understood by the guy (or girl) that comes after you. There’s enough bad code in the world, so be kind to your future counterpart.

Interested in Writing for Us?

Website developed by Michael Martin  (michael@angulartoreact.com
© 2015-16, All Rights Reserved