How To Implement Conditional Rendering In React Applications In Three Easy Ways!

It is a frequent use case when designing an application in React conditional rendering or any other specific JS library or framework to show or hide items depending on specific circumstances. A straightforward user interaction might be to have a popup appear when a user hits a particular button and disappear when the user clicks the cross icon. Another illustration would be authentication. When someone is logged in, we display a "log out" button, and when they are not, we display a "login/sign up" form. Conditional rendering is the process of executing logic or drawing user interface elements based on specific situations.

This post will explore React conditional rendering and examine the most common and simple approaches to dealing with certain situations. We mostly cover what is below.

Use of Simple If-Else Condition:

This functions similarly to a standard If-else statement in Javascript. The If Section is where you should put your condition, and the True and False blocks should contain the appropriate components in accordance.

In the below example, there is a use case that shows PaymentSuccessfulComponent or the PaymentFailureComponent. The situation depends on props that coming by.  

• const Payments = ({status}) =>{
•    return  (
•        <div>
•            <h2>Payment Status< /h2>
•            {
•                if(status === "SUCCESS"){
•                    <PaymentSuccess></PaymentSuccess>
•                }else{
•                    <PaymentFailure></PaymentFailure>
•                }
•            }
•        </div>
•    )
• }

Using Ternary Operator:

In this React conditional rendering method, If you need to avoid the lengthy lines of code that come after the curly braces, this is a different approach. This is comparable to utilising the Ternary Operator in pure JavaScript to produce the required results. You can also hire React developer to make this rendering process smoother. 

• const Payments = ({status}) =>{
•    return  (
•        <div>
•            <h2> Payment Status</h2>
•            {
•                status ? <PaymentSuccess></PaymentSuccess> : <PaymentFailure></PaymentFailure>
•            }
•        </div>
•    )
• }

Using Enums

Enums and JavaScript's Object can be combined to produce a key-value map. It can be mapped to various values, which we can then employ in line with the use cases we adhere to. Let's look at how enums may be used in React to implement conditional rendering.

 Here, we create an enumeration of components.

• const ENUM_OF_COMPONENTS = {
•    pricing : ,
•    checkout :
• }
• Let’s define each component.
• const Pricing = () =>{
•    return
  PRICING DATA
• }
• const Checkout = () =>{
•    return
  CHECKOUT DATA
• }

Now depending on your use case, create a generic method that will help you render the above two Components conditionally

• class Enum extends React.Component{
• class Enum extends React.Component{
•    render(){
•        return(
•            
   
•                
•            
•        )
•    }
• }

Here, the conditional rendering will depend on the state you pass to the ENUM_OF_COMPONENTS.

In summary

React conditional rendering is a crucial component that supports numerous use cases in application development. We talked about various approaches to conditional rendering in React. It specifically depends on the strategy that best suits your use case. If you want to write more understandable code, you could also use the If-Else approach. Alternatively, you could use the Enum approach.