In 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? ReactJS Coming from a different background many developers might search for an alternative of or even . 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 . ng-if=”someLogic here” (AngularJS) {{if someLogic here}} (Handlebars in EmberJS) 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, always evaluates to , and always evaluates to . true && expression expression false && expression false Therefore, if the condition is , the element right after will appear in the output. If it is , React will ignore and skip it. true && false 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 expression which is currently (March 2017) at stage-0: do {...} Remember that you need to use preset or plugin in your setup. babel-preset-0 transform-do expressions .babelrc 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.

Different

Keep

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Use native conditional statements for the win in ReactJS

Too Long; Didn't Read

Companies Mentioned

Marios Fakiolas

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Use native conditional statements for the win in ReactJS

Too Long; Didn't Read

Companies Mentioned

Marios Fakiolas

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES