Conditions in React.js

 

Conditions in React.js

In React, conditional rendering is used to display different UI elements based on conditions. There are multiple ways to handle conditions in React.

---

1. Using if-else Statements (Inside Function Components)

Traditional if-else statements can be used inside a function.

Example: Conditional Rendering Using if-else

import React from 'react';

 

const Message = ({isLoggedIn})=>{

 

    if(isLoggedIn)

    {

        return <h2>Welcome back, User!</h2>;

    }

    else{

        return <h2>Please log in.</h2>;

    }

 

}

 

export default Message;

App.js

 

import './App.css';

import Message from './components/Message';

function App() {

  return (

    <div className="App">

 

      <Message isLoggedIn=""/>

     

     

     

 

    </div>

  );

}

 

export default App;

 

 

Key Points

• if-else statements are useful when the logic is more complex.
• Cannot be used directly inside JSX.

---

2. Using Ternary Operator (? :)

The ternary operator is a shorter alternative to if-else and can be used inside JSX.

Example: Ternary Operator in JSX

import React from 'react';

 

const Message = ({isLoggedIn})=>{

 

    return <h2>{isLoggedIn ? "True":"False"}</h2>

 

}

 

export default Message;

Key Points

• More concise than if-else.
• Ideal for simple conditions.
• Can be used directly inside JSX.

---

3. Using Logical AND (&&) Operator

Useful when you only need to render something if the condition is true.

Example: Rendering Only When Condition is true

import React from 'react';

 

const Message = ({isLoggedIn})=>{

 

    return(

        <div>

            <h2>Dashboard</h2>

 

            {isLoggedIn && <p>I have a Notification</p>}

        </div>

    )

 

}

 

export default Message;

Key Points

• If hasNotifications is true, the <p> tag is rendered.
• If false, nothing is rendered.

---

4. Using switch-case for Multiple Conditions

When handling multiple conditions, switch-case is better than multiple if-else statements.

Example: Using switch-case

import React from 'react';

 

const Message = ({status})=>{

 

    let message;

 

    switch(status)

    {

        case "success":

            message = "Operation was successful!";

            break;

        case "error":

            message = "Something went wrong.";

            break;

       

        case "loading":

            message = "Loading, please wait...";

            break;

       

        default:

            message = "Unknown status.";

     

    }

 

    return <h1>{message}</h1>

 

}

 

export default Message;

 

Key Points

• Useful when multiple cases need to be handled.
• Helps keep code clean and readable.

---

5. Conditional Rendering with && and || in JSX

You can also use the || (OR) operator to provide default values.

Example: || Operator for Default Value

import React from 'react';

 

const Message = ({username})=>{

 

    return <h2>Welcome {username || "Guest"}</h2>

 

   

}

 

export default Message;

 Key Points

• If username is null or undefined, "Guest" is displayed.

---

Comparison Table of Conditional Methods

Method	Use Case	JSX Support
if-else	Complex conditions	❌ No
Ternary ? :	Simple conditions	✅ Yes
Logical AND &&	Render only if true	✅ Yes
switch-case	Multiple conditions	❌ No
Logical OR `		`

---

Conclusion

• Use ternary (? :) for short conditions inside JSX.
• Use && when rendering only when a condition is true.
• Use if-else or switch-case for complex logic outside JSX.