Different Conditional Rendering techniques and approaches.

Introduction

In React, we create components to render the behavior we want. Further, like Javascript we can implement conditions to provide logic and control how and when we want to render our components. These conditionals work the same way as in Javascript, and the power behind React, using state, updating, and re-rendering the UI allows us to improve our applications feel and interactivity.

Inline JSX or not

The first thing to be aware of is that the code you write for conditional rendering can written either within the function itself, or can be written inline as part of the JSX return statement. Using the traditional if...else syntax requires writing the code in the component function itself and not the JSX. This can be performed both by setting different JSX return for the conditional, or by defining a variable conditionally with the desired html element and then providing that variable to the JSX return. There are also a number of different inline operations which use conditionals within the JSX return line.

conditional statement with && operator

Conditional Rendering is setup primarily using if statements; however, there are a number of ways to implement this functionality depending on how you want to control the rendering. One simple implementation is using if with the logical && operation.

This conditional setup uses javascript logic where true && expression evaluates to the expression and false && expression evaluates to false. Therefore, we can easily render an element only when a certain condition is met (e.g. evaluates to true.

if...else with Ternary

Another common approach to conditional rendering utilizes if...else logic and commonly includes using the Ternary operator condition ? true : false. The benefit of using the ternary operator is that can be done inline and provided as part of the return in our component. This makes for quick implementation and readable code.

The ternary operator approach is most useful in instances where you want to render one thing or another based on some conditional evaluation. Additionally, the more traditional if...else statement could be used; however, this logic cannot be used inline in the return of a component, and therefore requires one to conditionally set html elements to variables within the if and else clauses to achieve the same result.

using Null to hide component

There is another approach to conditional rendering that involves telling the component itself to rendering nothing or hide itself based on a certain condition. This can be done by through the use of props by writing a conditional statement in the component function to evaluate if a value of the prop meets a condition and then tell the component not to render.

Although not used often, this approach can be useful for when you want to hide a component or stop its rendering after its parent has rendered it.

Conclusion

Conditional Rendering is a powerful tool in React for creating engaging applications, and is therefore used in nearly all applications. Being capable of using a plethora of different conditional logic statements to perform conditional rendering helps us code in better and more readable ways that our tailored to each specific instance.