Level Up Your React Conditionals with JSX Control Statements

Level Up Your React Conditionals with JSX Control Statements

Do you write conditionals correctly within your React applications?

Good conditionals are an essential part of any React application. We use conditionals to show or hide elements or components in our applications. In short – to be an effective React developer, you must know how to write good conditionals. JSX-Control-Statements can help you do it easily.

JSX Control Statements

JSX-Control-Statements is a Babel plugin that extends JSX to add basic control statements: conditionals and loops. It does so by transforming component-like control statements to their JavaScript counterparts e.g.

<If condition={condition()}>Hello World!</If>

It appears to be pretty easy to implement conditionals as React components, which is underlined by the number of libraries that have taken this approach.

The only dependency JSX-Control-Statements relies upon is Babel. It is compatible with React and React Native.

☠️ Beware: This is a Babel plugin. It changes your code to other code - this means that some tooling that looks at your code (e.g. static analysis, typescript) is likely to not work. This plugin dates back to when JSX was daring and Javascript was more like playdough than meccano - if you want to stay on the well-trodden path stick with writing && and map.

Installation

As a prerequisite, you need to have Babel installed and configured in your project.

Install via npm:

 npm install --save-dev babel-plugin-jsx-control-statements

Then you only need to specify JSX-Control-Statements as Babel plugin, which you would typically do in your .babelrc.

{
  ...
  "plugins": ["jsx-control-statements"]
}

Alternative for Typescript project:

You can use tsx-control-statements. It's basically jsx-control-statements, but for the typescript compiler toolchain. Works for both javascript and typescript.

Install via npm:

npm i tsx-control-statements

Syntax

If Tag

Used to express the most simple conditional logic.

// simple
<If condition={ true }>
  <span>IfBlock</span>
</If>

// using multiple child elements and / or expressions
<If condition={ true }>
  one
  { "two" }
  <span>three</span>
  <span>four</span>
</If>

If statements transform to the ternary operator:

// before transformation
<If condition={test}>
  <span>Truth</span>
</If>;

// after transformation
{
  test ? <span>Truth</span> : null;
}

Choose Tag

This is an alternative syntax for more complex conditional statements.

<Choose>
  <When condition={ test1 }>
    <span>IfBlock</span>
  </When>
  <When condition={ test2 }>
    <span>ElseIfBlock</span>
    <span>Another ElseIfBlock</span>
    <span>...</span>
  </When>
  <Otherwise>
    <span>ElseBlock</span>
  </Otherwise>
</Choose>

// default block is optional; minimal example:
<Choose>
  <When condition={true}>
    <span>IfBlock</span>
  </When>
</Choose>

Transformation:

// Before transformation
<Choose>
  <When condition={test1}>
    <span>IfBlock1</span>
  </When>
  <When condition={test2}>
    <span>IfBlock2</span>
  </When>
  <Otherwise>
    <span>ElseBlock</span>
  </Otherwise>
</Choose>;

// After transformation
{
  test1 ? (
    <span>IfBlock1</span>
  ) : test2 ? (
    <span>IfBlock2</span>
  ) : (
    <span>ElseBlock</span>
  );
}

For Tag

Define <For> like so:

  // you must provide the key attribute yourself
  <For each="item" of={ this.props.items }>
    <span key={ item.id }>{ item.title }</span>
  </For>

  // using the index as key attribute is not stable if the array changes
  <For each="item" index="idx" of={ [1,2,3] }>
    <span key={ idx }>{ item }</span>
    <span key={ idx + '_2' }>Static Text</span>
  </For>

For Tag - Alternative Syntax

// before transformation
<For
  of={items}
  body={(item, index) => (
    <span key={item.id}>
      {index}. {item.title}
    </span>
  )}
/>;

// after transformation
{
  items.map(function(item, index) {
    <span key={item.id}>
      {index}. {item.title}
    </span>;
  });
}

With Tag

Used to assign values to local variables:

// simple
<With foo={ 47 } bar={ 'test' }>
  <span>{ foo }</span>
  <span>{ bar }</span>
</With>

// nested
<With foo={ 47 }>
  <With bar={ 'test' }>
    <span>{ foo }</span>
    <span>{ bar }</span>
  </With>
</With>

Conclusion

You can see that there's no if or ternary statement in sight and we have a very readable component structure. Give JSX control statements a try in your next React project and see if a library like this is for you.

Reference: