Lesson 12 — Conditional Rendering in React

by

Introduction 😊

In real applications, the UI does not stay the same all the time.

Sometimes you want to:

  • Show a Login button
  • Sometimes show Logout
  • Display a message only when data is available
  • Hide or show elements based on user actions

This is where Conditional Rendering comes into play ⚛️

In this lesson, you will learn:

  • What conditional rendering is
  • Why it is important
  • Different ways to apply conditions in React
  • Best practices and common mistakes

Let’s begin 🚀

What Is Conditional Rendering? 🤔

Conditional rendering means displaying different UI elements based on a condition.

👉 In simple words:

React decides what to show on the screen based on data or state.

This is similar to using if-else in JavaScript.

Why Conditional Rendering Is Important 🧠

Conditional rendering helps you:

  • Build dynamic user interfaces
  • Improve user experience
  • Control UI flow easily
  • Avoid unnecessary components

👉 Almost every real-world React app uses conditional rendering.

Using if-else for Conditional Rendering 📌

You can use normal JavaScript if-else logic.

function App() {
  const isLoggedIn = true;

  if (isLoggedIn) {
    return <h1>Welcome Back!</h1>;
  } else {
    return <h1>Please Login</h1>;
  }
}

✔ Easy to understand
✔ Useful for large conditions

Using Ternary Operator (? :) 🔀 (Most Common)

The ternary operator is widely used in JSX.

function App() {
  const isLoggedIn = false;

  return (
    <h1>
      {isLoggedIn ? "Welcome Back!" : "Please Login"}
    </h1>
  );
}

👉 Best for simple conditions.

Conditional Rendering Using Logical AND (&&) ✅

This method is used when you want to show something only if a condition is true.

function App() {
  const showMessage = true;

  return (
    <div>
      {showMessage && <p>Hello React!</p>}
    </div>
  );
}

✔ Clean syntax
✔ No else condition

Conditional Rendering with Components 🧩

You can render entire components conditionally.

function UserGreeting() {
  return <h2>Welcome User</h2>;
}

function GuestGreeting() {
  return <h2>Please Sign Up</h2>;
}

function App() {
  const isLoggedIn = true;

  return (
    isLoggedIn ? <UserGreeting /> : <GuestGreeting />
  );
}

👉 This keeps code clean and modular.

Conditional Rendering Using State ⚛️

State is commonly used for conditions.

import { useState } from "react";

function App() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle Message
      </button>

      {isVisible && <p>This is visible</p>}
    </div>
  );
}

👉 UI updates automatically when state changes.

Avoid Using if Inside JSX ❌

❌ Incorrect:

return (
  <div>
    if (isLoggedIn) {
      <h1>Welcome</h1>
    }
  </div>
);

✅ Correct approach:
Use ternary or && outside JSX logic.

Common Use Cases of Conditional Rendering 🌍

  • Login / Logout buttons
  • Loading spinners
  • Error messages
  • Showing data only after API call
  • Role-based UI (Admin / User)

Common Mistakes Beginners Make ❌

  • Writing if directly inside JSX
  • Overusing ternary operators
  • Making conditions too complex
  • Forgetting to handle false cases

💡 Keep conditions simple and readable.

Conclusion 🎯

Conditional rendering is a core React concept that helps control what users see.

Key takeaways:

  • React uses JavaScript conditions to render UI
  • if-else, ternary, and && are common methods
  • State is often used with conditions
  • Clean conditional logic improves readability

👉 Mastering conditional rendering helps you build real-world React apps 💙

Frequently Asked Questions (FAQs) ❓

Can we use if inside JSX?

No. Use ternary or logical operators instead.

Which method is best for conditional rendering?

It depends on the complexity of the condition.

Can we conditionally render components?

Yes. Entire components can be rendered conditionally.

What’s Next? 🚀

👉 In the next lesson, we will learn:

Lesson 13 — Lists & Keys in React
Rendering multiple items efficiently using lists and keys.

Leave a Comment