In ReactJS we can export some markup by using components render method. So far so good but what happens when we want to apply some if…else logic in there?
Coming from a different background many developers might search for an alternative of ng-if=”someLogic here” (AngularJS) or even {{if someLogic here}} (Handlebars in EmberJS). The answer is that there isn’t such thing. It may sound weird but in ReactJS we can apply some if…else logic by using dead simple vanilla JavaScript.
Simple if logic
When we want to apply some basic if logic we can create a wrapper method, run our logic in there and then render that method as we normally do:
Simple if logic with Logical AND
This looks good and serves our needs but it has some extra code we can get rid of by using logical AND operator. Let me show you:
It works because in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false.
Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.
Nice right? So as you see we can keep things clean by using logical AND operator for a simple if logic.
Simple if logic with Logical OR
Same way we can use Logical OR to render some default content when an option is missing:
If our user here doesn’t have a job then we will print that he is Unemployed.
Advanced if…else logic
Let’s create a more advanced example. There are times we are loading a collection of users so we want to show a preloader till this process is done. When this is over we want to render that list or declare that we didn’t find any user. How can we do this?
Once again we created a wrapper and in there we ran some advanced if…else logic. This is what our stateless component renders here since we returned that very method.
Advanced if…else logic with IIFE
We can make this even simpler by using an IIFE (Immediately-Invoked Function Expression) and omit that wrapper. Let me show you:
By using an IIFE we don’t need to use a wrapping method but we can export at once that IIFE by running our advanced if…else logic in there.
Advanced if…else logic with do {…} expression (stage-0)
Instead of using an IIFE you can use experimental do {...} expression which is currently (March 2017) at stage-0:
Remember that you need to use presetbabel-preset-0 or transform-do expressions plugin in your .babelrc setup.
Advanced if…else logic with ternary operator
I know you saw that coming. Ternary operator is a life-saver most of the times and we can nest more than one expressions. I don’t recommend doing so since it is really ugly and your code becomes non-readable but it is good to know you can use it in ReactJS and do whatever you like:
More conditional statements
In our examples above we could use even more good stuff like switch or if…else if…else etc ReactJS gives us the flexibility to use native conditional statements and make these filterings without having to master a new template syntax with custom directives and expressions. This makes ReactJS extremely powerful.