React Conditional Rendering

1. Using if Statements

One of the simplest ways to conditionally render components is by using if statements. In this example, a component will display a message based on whether a user is logged in.

Edit Copy

function Greeting({ isLoggedIn }) {
    if (isLoggedIn) {
        return <h1>Welcome back!</h1>;
    }
    return <h1>Please sign up.</h1>;
}

In this example, if isLoggedIn is true, the message "Welcome back!" is displayed; otherwise, "Please sign up." is shown.

2. Using the Ternary Operator

The ternary operator provides a concise way to handle conditional rendering. Here’s an example:

Edit Copy

function UserGreeting({ isLoggedIn }) {
    return (
        <div>
            {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}
        </div>
    );
}

The ternary operator offers a compact form for conditional rendering, making the code easier to read in simple cases.

3. Using Logical && Operator

For conditions where you only need to render something if a condition is true, you can use the logical && operator. This is useful when there’s no need for an else condition.

Edit Copy

function Mailbox({ unreadMessages }) {
    return (
        <div>
            <h1>Hello!</h1>
            {unreadMessages.length > 0 && <h2>You have {unreadMessages.length} unread messages.</h2>}
        </div>
    );
}

In this example, the message count is only displayed if there are unread messages.

4. Conditional Rendering with switch Statements

When multiple conditions need to be checked, using a switch statement might make the code more organized. Here’s an example:

Edit Copy

function Notification({ status }) {
    switch (status) {
        case "success":
            return <div className="success">Operation successful!</div>;
        case "error":
            return <div className="error">Something went wrong.</div>;
        case "loading":
            return <div className="loading">Loading...</div>;
        default:
            return null;
    }
}

In this example, Notification renders different messages based on the status prop.

5. Inline Conditional Rendering with Immediately Invoked Function Expressions (IIFE)

In more complex cases, an Immediately Invoked Function Expression (IIFE) can be used within JSX to execute conditional logic directly.

Edit Copy

function Profile({ user }) {
    return (
        <div>
            {(() => {
                if (user) {
                    return <h1>Welcome, {user.name}!</h1>;
                } else {
                    return <h1>Please log in.</h1>;
                }
            })()}
        </div>
    );
}

In this example, an IIFE allows for more complex logic within the JSX while still keeping the component declarative.

6. Summary

In this tutorial, we covered various techniques for conditional rendering in React, including if statements, the ternary operator, the logical && operator, switch statements, and IIFEs. Choosing the right approach depends on the complexity of your condition and the readability of your code.