What will I learn from this blog post?

You will learn the core concept explained in this post, plus practical examples and clear mental models you can apply in real projects.

Who is this blog post for?

It is designed for developers who want to understand modern JavaScript concepts and apply them confidently in React-friendly code.

Do I need any special tools to understand this?

No. The examples are written in a beginner-friendly way, so you can follow the logic even without a complex setup.

Conditional Text & Class Names in JSX: Dynamically Changing Content and Styles in React - Vimal Thapliyal

🎯 What Are Conditional Text & Classes? (Simple Analogy)

Imagine you're a shop owner changing your store display:

STATIC DISPLAY (What you learned before):
┌─────────────────────────────────────────┐
│  🏪 SHOP WINDOW                         │
│                                         │
│  Every day looks the same:              │
│  ┌─────────────────────────────────┐    │
│  │  🍕 Pizza: $12                   │    │
│  │  Status: AVAILABLE               │    │
│  │  Color: Normal (green border)    │    │
│  └─────────────────────────────────┘    │
│                                         │
│  Problem: Even when sold out,           │
│  it still shows "$12" and "AVAILABLE"   │
│  and looks the same!                    │
│                                         │
│  In React:                              │
│  <li className="pizza">                 │
│    <span>$12</span>                     │
│  </li>                                  │
│  // Always the same, no matter what!    │
└─────────────────────────────────────────┘

CONDITIONAL DISPLAY (New technique):
┌─────────────────────────────────────────┐
│  🏪 SMART SHOP WINDOW                   │
│                                         │
│  When IN STOCK:                         │
│  ┌─────────────────────────────────┐    │
│  │  🍕 Pizza: $12                   │    │
│  │  Status: AVAILABLE               │    │
│  │  Color: Normal (green border)    │    │
│  └─────────────────────────────────┘    │
│                                         │
│  When SOLD OUT:                         │
│  ┌─────────────────────────────────┐    │
│  │  🍕 Pizza: SOLD OUT              │    │
│  │  Status: UNAVAILABLE             │    │
│  │  Color: Grayed out (gray border) │    │
│  └─────────────────────────────────┘    │
│                                         │
│  Same element, different content & style!│
│                                         │
│  In React:                              │
│  <li className={soldOut ? "pizza sold-out" : "pizza"}> │
│    <span>{soldOut ? "SOLD OUT" : "$12"}</span>         │
│  </li>                                  │
│  // Changes based on condition!         │
└─────────────────────────────────────────┘

KEY INSIGHT:
Conditional text = "Same box, different label"
Conditional class = "Same box, different paint"

⚠️ The Big Problem: "How Do I Change Just Part of an Element?"

// ==========================================
// THE "ALL OR NOTHING" TRAP (Review)
// ==========================================

// ❌ WRONG: Hiding the entire pizza when sold out
function Pizza({ pizzaObj }) {
  if (pizzaObj.soldOut) return null;  // Pizza disappears completely!

  return (
    <li className="pizza">
      <img src={pizzaObj.photoName} alt={pizzaObj.name} />
      <div>
        <h3>{pizzaObj.name}</h3>
        <p>{pizzaObj.ingredients}</p>
        <span>${pizzaObj.price}</span>
      </div>
    </li>
  );
}

// Problem: We want to SHOW the pizza but gray it out
// We want to say "SOLD OUT" instead of the price
// But we still want the image, name, and ingredients visible!

// ==========================================
// THE SOLUTION: Change content INSIDE the element
// ==========================================

// ✅ CORRECT: Keep the element, change its content
function Pizza({ pizzaObj }) {
  return (
    <li className={`pizza ${pizzaObj.soldOut ? "sold-out" : ""}`}>
      <img src={pizzaObj.photoName} alt={pizzaObj.name} />
      <div>
        <h3>{pizzaObj.name}</h3>
        <p>{pizzaObj.ingredients}</p>
        {/* Change just the text, not the whole element! */}
        <span>{pizzaObj.soldOut ? "SOLD OUT" : `$${pizzaObj.price}`}</span>
      </div>
    </li>
  );
}

// Visual comparison:
// Before:                    After:
// Pizza disappears          Pizza stays visible
//    ↓                          ↓
// Bad UX!                   Good UX!
// User doesn't know         User knows it's sold out
// what existed              but can still see it

📋 Complete Basic Examples

Create file: react-conditional-text-classes.js

// ==========================================
// CONDITIONAL TEXT & CLASSES - Complete Guide
// ==========================================

/*
TWO TECHNIQUES:
┌─────────────────────────────────────────┐
│  1. CONDITIONAL TEXT CONTENT              │
│     Change what's inside an element       │
│     {condition ? "Text A" : "Text B"}     │
│                                           │
│  2. CONDITIONAL CSS CLASSES               │
│     Change the styling of an element      │
│     className={condition ? "class-a" : "class-b"} │
└─────────────────────────────────────────┘
*/

// ==========================================
// EXAMPLE 1: Conditional Text (Pizza Price)
// ==========================================

function Pizza({ pizzaObj }) {
  return (
    <li className="pizza">
      <img src={pizzaObj.photoName} alt={pizzaObj.name} />
      <div>
        <h3>{pizzaObj.name}</h3>
        <p>{pizzaObj.ingredients}</p>
        
        {/* CONDITIONAL TEXT: Price or "SOLD OUT" */}
        <span>
          {pizzaObj.soldOut
            ? "SOLD OUT"           // If sold out, show this text
            : `$${pizzaObj.price}` // If not, show the price
          }
        </span>
        
      </div>
    </li>
  );
}

// Visual Flow:
// pizzaObj.soldOut = true
//    ↓
// Ternary checks: true ?
//    ↓
// Returns "SOLD OUT"
//    ↓
// <span>SOLD OUT</span>

// pizzaObj.soldOut = false
//    ↓
// Ternary checks: false ?
//    ↓
// Returns `$${pizzaObj.price}` → "$12"
//    ↓
// <span>$12</span>

// ==========================================
// EXAMPLE 2: Conditional CSS Classes (Grayed Out)
// ==========================================

function Pizza({ pizzaObj }) {
  return (
    {/* CONDITIONAL CLASS: Add "sold-out" if soldOut is true */}
    <li className={`pizza ${pizzaObj.soldOut ? "sold-out" : ""}`}>
      <img src={pizzaObj.photoName} alt={pizzaObj.name} />
      <div>
        <h3>{pizzaObj.name}</h3>
        <p>{pizzaObj.ingredients}</p>
        <span>{pizzaObj.soldOut ? "SOLD OUT" : `$${pizzaObj.price}`}</span>
      </div>
    </li>
  );
}

// CSS:
// .pizza { border: 2px solid green; opacity: 1; }
// .pizza.sold-out { border: 2px solid gray; opacity: 0.5; }

// Visual Flow:
// pizzaObj.soldOut = true
//    ↓
// Template literal: `pizza ${true ? "sold-out" : ""}`
//    ↓
// Result: "pizza sold-out"
//    ↓
// <li className="pizza sold-out">  ← Grayed out!

// pizzaObj.soldOut = false
//    ↓
// Template literal: `pizza ${false ? "sold-out" : ""}`
//    ↓
// Result: "pizza " (just "pizza" with trailing space)
//    ↓
// <li className="pizza">  ← Normal!

// ==========================================
// EXAMPLE 3: The Template Literal Explained
// ==========================================

// What is a template literal?
// It's a string that can contain JavaScript!

const name = "Alice";
const greeting = `Hello ${name}!`;  // "Hello Alice!"

// In JSX for classes:
const soldOut = true;
const className = `pizza ${soldOut ? "sold-out" : ""}`;
// Result: "pizza sold-out"

const soldOut = false;
const className = `pizza ${soldOut ? "sold-out" : ""}`;
// Result: "pizza "

// Visual:
// `pizza ${condition ? "sold-out" : ""}`
//   ↑           ↑
// Static text  Dynamic part (JavaScript!)

// ==========================================
// EXAMPLE 4: Restaurant Open Status
// ==========================================

function Footer({ hour, openHour, closeHour }) {
  const isOpen = hour >= openHour && hour <= closeHour;

  return (
    <footer className={`footer ${isOpen ? "open" : "closed"}`}>
      {/* Conditional text in heading */}
      <h2>
        {isOpen
          ? "🟢 We're Open!"
          : "🔴 We're Closed"
        }
      </h2>
      
      {/* Conditional text in paragraph */}
      <p>
        {isOpen
          ? `Come visit us! Open until ${closeHour}:00`
          : `Sorry, we're closed. We open at ${openHour}:00`
        }
      </p>
      
      {/* Conditional button text */}
      <button className={`btn ${isOpen ? "btn-active" : "btn-disabled"}`}>
        {isOpen ? "Order Now" : "View Menu"}
      </button>
    </footer>
  );
}

// CSS:
// .footer.open { background: #e8f5e9; border-color: #4caf50; }
// .footer.closed { background: #ffebee; border-color: #f44336; }
// .btn-active { background: #4caf50; cursor: pointer; }
// .btn-disabled { background: #ccc; cursor: not-allowed; }

// ==========================================
// EXAMPLE 5: User Status Badge
// ==========================================

function UserCard({ user }) {
  return (
    <div className={`user-card ${user.isAdmin ? "admin" : "regular"}`}>
      <img src={user.avatar} alt={user.name} />
      <h3>{user.name}</h3>
      
      {/* Conditional badge text and class */}
      <span className={`badge ${user.isAdmin ? "badge-admin" : "badge-user"}`}>
        {user.isAdmin ? "👑 ADMIN" : "👤 USER"}
      </span>
      
      {/* Conditional status text */}
      <p className={`status ${user.isOnline ? "online" : "offline"}`}>
        {user.isOnline ? "🟢 Online" : "⚫ Offline"}
      </p>
    </div>
  );
}

// ==========================================
// EXAMPLE 6: Form Input States
// ==========================================

function InputField({ label, value, error, isValid }) {
  return (
    <div className="form-group">
      <label>{label}</label>
      <input
        className={`input ${error ? "input-error" : isValid ? "input-success" : ""}`}
        value={value}
      />
      {/* Conditional helper text */}
      <span className={`helper-text ${error ? "text-error" : "text-hint"}`}>
        {error ? `❌ ${error}` : "✓ Looks good!"}
      </span>
    </div>
  );
}

// Usage:
// <InputField label="Email" value=alice@email.com isValid={true} />
// → Green border, "✓ Looks good!"

// <InputField label="Email" value="invalid" error="Invalid email format" />
// → Red border, "❌ Invalid email format"

🚀 Interactive React Usage Examples

Complete React File: `ConditionalTextClassesMasterClass.jsx`

import React, { useState } from 'react';

// ==========================================
// INTERACTIVE CONDITIONAL TEXT & CLASSES DEMO
// ==========================================

function ConditionalTextClassesMasterClass() {
  const [demo, setDemo] = useState('text');

  const demos = {
    text: { title: 'Conditional Text', component: <TextDemo /> },
    classes: { title: 'Conditional Classes', component: <ClassesDemo /> },
    combined: { title: 'Combined', component: <CombinedDemo /> },
    comparison: { title: 'vs Element Rendering', component: <ComparisonDemo /> }
  };

  return (
    <div style={{ maxWidth: '900px', margin: '0 auto', padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      <header style={{ background: '#e9c46a', color: '#264653', padding: '30px', borderRadius: '10px', marginBottom: '30px' }}>
        <h1 style={{ margin: 0 }}>🎨 Conditional Text & Classes</h1>
        <p style={{ margin: '10px 0 0 0', opacity: 0.9 }}>Changing Content & Style Inside Elements</p>
      </header>

      <nav style={{ display: 'flex', gap: '10px', marginBottom: '30px', flexWrap: 'wrap' }}>
        {Object.entries(demos).map(([key, { title }]) => (
          <button
            key={key}
            onClick={() => setDemo(key)}
            style={{
              padding: '12px 24px',
              fontSize: '16px',
              border: 'none',
              borderRadius: '8px',
              cursor: 'pointer',
              backgroundColor: demo === key ? '#264653' : '#e0e0e0',
              color: demo === key ? 'white' : '#333',
              fontWeight: demo === key ? 'bold' : 'normal'
            }}
          >
            {title}
          </button>
        ))}
      </nav>

      <main style={{ background: '#f8f9fa', padding: '30px', borderRadius: '10px', minHeight: '400px' }}>
        {demos[demo].component}
      </main>
    </div>
  );
}

// ==========================================
// DEMO 1: Conditional Text Content
// ==========================================

function TextDemo() {
  const [soldOut, setSoldOut] = useState(false);

  const pizza = {
    name: "Margherita",
    price: 12,
    ingredients: "Tomato, mozzarella, basil",
    soldOut: soldOut
  };

  return (
    <div>
      <h2>Conditional Text: Price vs "SOLD OUT"</h2>
      
      <div style={{ marginBottom: '20px' }}>
        <button
          onClick={() => setSoldOut(!soldOut)}
          style={{
            padding: '12px 24px',
            fontSize: '16px',
            border: 'none',
            borderRadius: '8px',
            cursor: 'pointer',
            backgroundColor: soldOut ? '#f44336' : '#4caf50',
            color: 'white'
          }}
        >
          Toggle: {soldOut ? 'SOLD OUT' : 'IN STOCK'}
        </button>
      </div>

      <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: '1fr 1fr' }}>
        {/* Code Example */}
        <div style={{ padding: '20px', background: 'white', borderRadius: '8px', border: '2px solid #e0e0e0' }}>
          <h3>Code:</h3>
          <pre style={{ background: '#1e1e1e', color: '#d4d4d4', padding: '15px', borderRadius: '4px', fontSize: '13px', overflow: 'auto' }}>
{`<span>
  {pizzaObj.soldOut
    ? "SOLD OUT"
    : \`$\${pizzaObj.price}\`
  }
</span>`}
          </pre>
          
          <div style={{ marginTop: '15px', padding: '15px', background: '#f5f5f5', borderRadius: '4px' }}>
            <h4>How it works:</h4>
            <ul>
              <li>Keep the <code>&lt;span&gt;</code> element</li>
              <li>Only change the TEXT inside</li>
              <li>Use ternary: condition ? "A" : "B"</li>
            </ul>
          </div>
        </div>

        {/* Live Result */}
        <div style={{ padding: '20px', background: 'white', borderRadius: '8px', border: '2px solid #e0e0e0' }}>
          <h3>Result:</h3>
          <div style={{ padding: '20px', background: '#f5f5f5', borderRadius: '8px' }}>
            <div style={{ display: 'flex', gap: '15px', alignItems: 'center' }}>
              <div style={{ fontSize: '40px' }}>🍕</div>
              <div>
                <h4 style={{ margin: '0 0 5px 0' }}>{pizza.name}</h4>
                <p style={{ margin: '0 0 10px 0', color: '#666' }}>{pizza.ingredients}</p>
                <span style={{
                  fontWeight: 'bold',
                  fontSize: '18px',
                  color: soldOut ? '#f44336' : '#2a9d8f'
                }}>
                  {soldOut ? "SOLD OUT" : `$${pizza.price}`}
                </span>
              </div>
            </div>
          </div>
          
          <div style={{ marginTop: '15px', padding: '10px', background: soldOut ? '#ffebee' : '#e8f5e9', borderRadius: '4px' }}>
            <strong>Current state:</strong> {soldOut ? 'Showing "SOLD OUT"' : `Showing "$${pizza.price}"`}
          </div>
        </div>
      </div>
    </div>
  );
}

// ==========================================
// DEMO 2: Conditional CSS Classes
// ==========================================

function ClassesDemo() {
  const [soldOut, setSoldOut] = useState(false);

  return (
    <div>
      <h2>Conditional Classes: Normal vs Grayed Out</h2>
      
      <div style={{ marginBottom: '20px' }}>
        <button
          onClick={() => setSoldOut(!soldOut)}
          style={{
            padding: '12px 24px',
            fontSize: '16px',
            border: 'none',
            borderRadius: '8px',
            cursor: 'pointer',
            backgroundColor: soldOut ? '#f44336' : '#4caf50',
            color: 'white'
          }}
        >
          Toggle Style: {soldOut ? 'SOLD OUT' : 'IN STOCK'}
        </button>
      </div>

      <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: '1fr 1fr' }}>
        {/* Code Example */}
        <div style={{ padding: '20px', background: 'white', borderRadius: '8px', border: '2px solid #e0e0e0' }}>
          <h3>Code:</h3>
          <pre style={{ background: '#1e1e1e', color: '#d4d4d4', padding: '15px', borderRadius: '4px', fontSize: '13px', overflow: 'auto' }}>
{`<li className={\`pizza \${pizzaObj.soldOut ? "sold-out" : ""}\`}>
  {/* content */}
</li>`}
          </pre>
          
          <div style={{ marginTop: '15px', padding: '15px', background: '#f5f5f5', borderRadius: '4px' }}>
            <h4>Template Literal Breakdown:</h4>
            <p><code>`pizza ${soldOut ? "sold-out" : ""}`</code></p>
            <ul>
              <li><strong>soldOut = true:</strong> "pizza sold-out"</li>
              <li><strong>soldOut = false:</strong> "pizza "</li>
            </ul>
          </div>
        </div>

        {/* Live Result */}
        <div style={{ padding: '20px', background: 'white', borderRadius: '8px', border: '2px solid #e0e0e0' }}>
          <h3>Result:</h3>
          <div
            style={{
              padding: '20px',
              borderRadius: '8px',
              border: '2px solid',
              borderColor: soldOut ? '#9e9e9e' : '#4caf50',
              backgroundColor: soldOut ? '#f5f5f5' : 'white',
              opacity: soldOut ? 0.6 : 1,
              transition: 'all 0.3s ease'
            }}
          >
            <div style={{ display: 'flex', gap: '15px', alignItems: 'center' }}>
              <div style={{ fontSize: '40px', filter: soldOut ? 'grayscale(100%)' : 'none' }}>🍕</div>
              <div>
                <h4 style={{ margin: '0 0 5px 0', color: soldOut ? '#666' : '#333' }}>Margherita</h4>
                <p style={{ margin: '0 0 10px 0', color: soldOut ? '#999' : '#666' }}>Tomato, mozzarella, basil</p>
                <span style={{
                  fontWeight: 'bold',
                  fontSize: '18px',
                  color: soldOut ? '#f44336' : '#2a9d8f'
                }}>
                  {soldOut ? "SOLD OUT" : "$12"}
                </span>
              </div>
            </div>
          </div>
          
          <div style={{ marginTop: '15px', padding: '10px', background: '#fff3e0', borderRadius: '4px', fontSize: '14px' }}>
            <strong>Applied classes:</strong><br/>
            {soldOut ? '"pizza sold-out"' : '"pizza"'}<br/>
            <em>(Grayed out, reduced opacity)</em>
          </div>
        </div>
      </div>
    </div>
  );
}

// ==========================================
// DEMO 3: Combined Text + Classes
// ==========================================

function CombinedDemo() {
  const [status, setStatus] = useState('loading'); // loading, error, success

  const statuses = {
    loading: { label: 'Loading', color: '#2196f3', icon: '⏳' },
    error: { label: 'Error', color: '#f44336', icon: '❌' },
    success: { label: 'Success', color: '#4caf50', icon: '✅' }
  };

  const current = statuses[status];

  return (
    <div>
      <h2>Combined: Status Badge</h2>
      
      <div style={{ marginBottom: '20px', display: 'flex', gap: '10px' }}>
        {['loading', 'error', 'success'].map(s => (
          <button
            key={s}
            onClick={() => setStatus(s)}
            style={{
              padding: '10px 20px',
              background: status === s ? current.color : '#e0e0e0',
              color: status === s ? 'white' : '#333',
              border: 'none',
              borderRadius: '5px',
              textTransform: 'capitalize'
            }}
          >
            {s}
          </button>
        ))}
      </div>

      <div style={{ padding: '20px', background: 'white', borderRadius: '8px', border: '2px solid #e0e0e0' }}>
        <h3>Full Component:</h3>
        <pre style={{ background: '#1e1e1e', color: '#d4d4d4', padding: '15px', borderRadius: '4px', fontSize: '13px', overflow: 'auto' }}>
{`function StatusBadge({ status }) {
  return (
    <div className={\`badge \${status}\`}>
      <span className="icon">
        {status === 'loading' ? '⏳' :
         status === 'error' ? '❌' : '✅'}
      </span>
      <span className="text">
        {status === 'loading' ? 'Loading...' :
         status === 'error' ? 'Error occurred' : 'Success!'}
      </span>
    </div>
  );
}`}
        </pre>

        <h3 style={{ marginTop: '20px' }}>Live Result:</h3>
        <div
          style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: '10px',
            padding: '15px 25px',
            borderRadius: '8px',
            backgroundColor: current.color + '20', // 20 = hex opacity
            border: `2px solid ${current.color}`,
            color: current.color
          }}
        >
          <span style={{ fontSize: '24px' }}>{current.icon}</span>
          <span style={{ fontWeight: 'bold', fontSize: '18px' }}>
            {status === 'loading' ? 'Loading...' :
             status === 'error' ? 'Error occurred' : 'Success!'}
          </span>
        </div>
      </div>
    </div>
  );
}

// ==========================================
// DEMO 4: Comparison with Element Rendering
// ==========================================

function ComparisonDemo() {
  const [soldOut, setSoldOut] = useState(false);

  return (
    <div>
      <h2>Method Comparison: Same Result, Different Approach</h2>
      
      <div style={{ marginBottom: '20px' }}>
        <button
          onClick={() => setSoldOut(!soldOut)}
          style={{
            padding: '12px 24px',
            fontSize: '16px',
            border: 'none',
            borderRadius: '8px',
            cursor: 'pointer',
            backgroundColor: soldOut ? '#f44336' : '#4caf50',
            color: 'white'
          }}
        >
          Toggle: {soldOut ? 'SOLD OUT' : 'IN STOCK'}
        </button>
      </div>

      <div style={{ display: 'grid', gap: '20px', gridTemplateColumns: '1fr 1fr' }}>
        {/* Method 1: Conditional Element */}
        <div style={{ padding: '20px', background: '#ffebee', borderRadius: '8px' }}>
          <h3 style={{ color: '#c62828', marginTop: 0 }}>❌ Method 1: Conditional Element</h3>
          <p style={{ fontSize: '14px', color: '#666' }}>
            Change the ENTIRE element based on condition
          </p>
          <pre style={{ background: 'white', padding: '10px', borderRadius: '4px', fontSize: '12px' }}>
{`{soldOut ? (
  <span className="sold-out-text">
    SOLD OUT
  </span>
) : (
  <span className="price-text">
    $12
  </span>
)}`}
          </pre>
          
          <div style={{ marginTop: '10px', padding: '15px', background: 'white', borderRadius: '4px' }}>
            {soldOut ? (
              <span style={{ color: '#f44336', fontWeight: 'bold' }}>SOLD OUT</span>
            ) : (
              <span style={{ color: '#2a9d8f', fontWeight: 'bold' }}>$12</span>
            )}
          </div>
          
          <p style={{ fontSize: '13px', color: '#666', marginTop: '10px' }}>
            <em>Problem: Duplicated &lt;span&gt; element. What if you need to change the tag later?</em>
          </p>
        </div>

        {/* Method 2: Conditional Text */}
        <div style={{ padding: '20px', background: '#e8f5e9', borderRadius: '8px' }}>
          <h3 style={{ color: '#2e7d32', marginTop: 0 }}>✅ Method 2: Conditional Text (Better!)</h3>
          <p style={{ fontSize: '14px', color: '#666' }}>
            Keep the element, change only the CONTENT
          </p>
          <pre style={{ background: 'white', padding: '10px', borderRadius: '4px', fontSize: '12px' }}>
{`<span className={soldOut ? "sold-out" : "price"}>
  {soldOut ? "SOLD OUT" : "$12"}
</span>`}
          </pre>
          
          <div style={{ marginTop: '10px', padding: '15px', background: 'white', borderRadius: '4px' }}>
            <span style={{
              color: soldOut ? '#f44336' : '#2a9d8f',
              fontWeight: 'bold'
            }}>
              {soldOut ? "SOLD OUT" : "$12"}
            </span>
          </div>
          
          <p style={{ fontSize: '13px', color: '#666', marginTop: '10px' }}>
            <em>Better: One &lt;span&gt;, dynamic content. Cleaner and more maintainable!</em>
          </p>
        </div>
      </div>

      <div style={{ marginTop: '20px', padding: '15px', background: '#fff3e0', borderRadius: '8px' }}>
        <h4>💡 When to Use Which:</h4>
        <ul style={{ margin: '10px 0 0 0' }}>
          <li><strong>Conditional Element:</strong> Completely different HTML structure</li>
          <li><strong>Conditional Text:</strong> Same element, different content (preferred!)</li>
        </ul>
      </div>
    </div>
  );
}

export default ConditionalTextClassesMasterClass;

🧠 Memory Aids for Poor Logic Thinking

The "Chameleon" Analogy

┌─────────────────────────────────────────────────┐
│  CONDITIONAL TEXT & CLASSES = CHAMELEON 🦎       │
│                                                 │
│  A chameleon changes color based on environment   │
│  but it's still the SAME chameleon!               │
│                                                 │
│  BEFORE (Replacing the whole animal):             │
│  ┌─────────────────────────────────────────┐    │
│  │  if (danger) return <RedLizard />;      │    │
│  │  return <GreenLizard />;                │    │
│  │                                         │    │
│  │  Problem: Two different animals!        │    │
│  │  What if we want to add legs?           │    │
│  │  Need to change BOTH components!        │    │
│  └─────────────────────────────────────────┘    │
│                                                 │
│  AFTER (Same animal, different color):            │
│  ┌─────────────────────────────────────────┐    │
│  │  <Lizard color={danger ? "red" :       │    │
│  │    "green"} />                          │    │
│  │                                         │    │
│  │  Same component! Just props change.     │    │
│  │  Add legs in ONE place.                 │    │
│  └─────────────────────────────────────────┘    │
│                                                 │
│  IN REACT:                                      │
│  ┌─────────────────────────────────────────┐    │
│  │  // Same element, different text        │    │
│  │  <span>                                 │    │
│  │    {soldOut ? "SOLD OUT" : "$12"}       │    │
│  │  </span>                                │    │
│  │                                         │    │
│  │  // Same element, different class       │    │
│  │  <li className={\`pizza \${soldOut ?      │    │
│  │    "sold-out" : ""}\`}>                 │    │
│  └─────────────────────────────────────────┘    │
└─────────────────────────────────────────────────┘

Template Literal Visual Breakdown

┌─────────────────────────────────────────────────┐
│  TEMPLATE LITERAL FOR CLASSES - STEP BY STEP      │
│                                                 │
│  GOAL: Create class string based on condition     │
│                                                 │
│  Step 1: Start with backticks ` `                 │
│  ┌─────────────────────────────────────────┐    │
│  │  `pizza `                               │    │
│  │   ↑                                     │    │
│  │  Static text "pizza " (with space)      │    │
│  └─────────────────────────────────────────┘    │
│                      ↓                          │
│  Step 2: Add dynamic part with ${ }              │
│  ┌─────────────────────────────────────────┐    │
│  │  `pizza ${condition ? "sold-out" : ""}` │    │
│  │           ↑                             │    │
│  │        JavaScript expression!           │    │
│  └─────────────────────────────────────────┘    │
│                      ↓                          │
│  Step 3: Evaluate based on condition              │
│  ┌─────────────────────────────────────────┐    │
│  │  If soldOut = true:                     │    │
│  │  `pizza ${"sold-out"}`                  │    │
│  │  → "pizza sold-out"                     │    │
│  │                                         │    │
│  │  If soldOut = false:                    │    │
│  │  `pizza ${""}`                          │    │
│  │  → "pizza "                             │    │
│  └─────────────────────────────────────────┘    │
│                                                 │
│  REMEMBER:                                      │
│  • Backticks ` ` NOT quotes ' ' or " "          │
│  • ${ } for JavaScript inside string            │
│  • Condition ? "if-true" : "if-false"          │
└─────────────────────────────────────────────────┘

Common Patterns Cheat Sheet

┌─────────────────────────────────────────────────┐
│  COMMON CONDITIONAL PATTERNS                      │
│                                                 │
│  1. TEXT CONTENT:                                 │
│  ┌─────────────────────────────────────────┐    │
│  │  <span>                                 │    │
│  │    {isOpen ? "Open" : "Closed"}         │    │
│  │  </span>                                │    │
│  └─────────────────────────────────────────┘    │
│                                                 │
│  2. CSS CLASS (Simple):                          │
│  ┌─────────────────────────────────────────┐    │
│  │  <div className={isActive ? "active" :   │    │
│  │    "inactive"}>                         │    │
│  └─────────────────────────────────────────┘    │
│                                                 │
│  3. CSS CLASS (Combined):                        │
│  ┌─────────────────────────────────────────┐    │
│  │  <div className={\`card \${isActive ?      │    │
│  │    "active" : ""}\`}>                   │    │
│  └─────────────────────────────────────────┘    │
│                                                 │
│  4. MULTIPLE CLASSES:                            │
│  ┌─────────────────────────────────────────┐    │
│  │  <div className={\`btn \${isLarge ?       │    │
│  │    "btn-lg" : ""} \${isPrimary ?         │    │
│  │    "btn-primary" : "btn-secondary"}\`}>  │    │
│  └─────────────────────────────────────────┘    │
│                                                 │
│  5. STYLE OBJECT (Inline):                       │
│  ┌─────────────────────────────────────────┐    │
│  │  <div style={{                          │    │
│  │    color: isError ? 'red' : 'green',    │    │
│  │    opacity: isLoading ? 0.5 : 1         │    │
│  │  }}>                                    │    │
│  └─────────────────────────────────────────┘    │
│                                                 │
│  6. CONDITIONAL ATTRIBUTE:                       │
│  ┌─────────────────────────────────────────┐    │
│  │  <button disabled={!isValid}>           │    │
│  │  <input readOnly={isLocked} />          │    │
│  └─────────────────────────────────────────┘    │
└─────────────────────────────────────────────────┘

🎓 Practice Exercises

Exercise 1: Convert to Conditional Text

Convert this to use conditional text instead of conditional elements:

function Status({ isOnline }) {
  return (
    <div>
      {isOnline ? (
        <span className="online">Online</span>
      ) : (
        <span className="offline">Offline</span>
      )}
    </div>
  );
}

Solution:

function Status({ isOnline }) {
  return (
    <div>
      {/* Same element, conditional class and text */}
      <span className={isOnline ? "online" : "offline"}>
        {isOnline ? "Online" : "Offline"}
      </span>
    </div>
  );
}

Exercise 2: Create a Product Card

Create a product card that shows "SALE" badge and discounted price when on sale:

function ProductCard({ product }) {
  // TODO: Add conditional classes and text
  // - If onSale: show "SALE" badge, red border, strikethrough original price
  // - Show sale price if on sale, regular price if not

  return (
    <div className="product">
      <h3>{product.name}</h3>
      <p>{product.description}</p>
      {/* Add price and badge here */}
    </div>
  );
}

Solution:

function ProductCard({ product }) {
  return (
    <div className={`product ${product.onSale ? "on-sale" : ""}`}>
      <h3>{product.name}</h3>
      <p>{product.description}</p>
      
      {/* Conditional badge */}
      {product.onSale && (
        <span className="sale-badge">SALE</span>
      )}
      
      {/* Conditional price display */}
      <div className="price">
        {product.onSale ? (
          <>
            <span className="original-price">
              ${product.originalPrice}
            </span>
            <span className="sale-price">
              ${product.salePrice}
            </span>
          </>
        ) : (
          <span className="regular-price">
            ${product.price}
          </span>
        )}
      </div>
    </div>
  );
}

Exercise 3: Fix the Bug

This code has a bug. The class is not being applied correctly:

function Button({ isPrimary, isLarge }) {
  return (
    <button className="btn ${isPrimary ? 'btn-primary' : 'btn-secondary'}">
      Click me
    </button>
  );
}

Bug: Using regular quotes instead of backticks for template literal.

Solution:

function Button({ isPrimary, isLarge }) {
  return (
    <button className={`btn ${isPrimary ? 'btn-primary' : 'btn-secondary'}`}>
      Click me
    </button>
  );
}

💡 Key Takeaways

Concept	What It Means	Example
Conditional Text	Change content inside element	`{soldOut ? "SOLD OUT" : "$12"}`
Conditional Class	Change styling of element	`className={\`pizza ${soldOut ? "sold-out" : ""}\`}`
Template Literal	String with embedded JS	` text ${variable} `
Keep Element	Don't replace whole element, just content	Same `<span>`, different text
Dynamic Classes	Combine static + dynamic class names	`"pizza " + (soldOut ? "sold-out" : "")`

The Pattern:

// Conditional text
<span>{condition ? "Text A" : "Text B"}</span>

// Conditional class
<div className={`static-class ${condition ? "dynamic-class" : ""}`}>

Golden Rules:

Same element, different content = conditional text (preferred)
Same element, different style = conditional class
Use backticks ` `` for template literals with embedded JS
Use ${} inside template literals for JavaScript expressions
Different structure entirely = conditional element (early return or ternary)

One Sentence Summary: > "Instead of replacing the whole HTML element, keep the element and use curly braces to dynamically change its text content with ternary operators, and use backtick template literals to conditionally add CSS classes - like giving the same box different labels and paint colors!"

🎯 What Are Conditional Text & Classes? (Simple Analogy)

⚠️ The Big Problem: "How Do I Change Just Part of an Element?"

📋 Complete Basic Examples

🚀 Interactive React Usage Examples

Complete React File: ConditionalTextClassesMasterClass.jsx

🧠 Memory Aids for Poor Logic Thinking

The "Chameleon" Analogy

Template Literal Visual Breakdown

Common Patterns Cheat Sheet

🎓 Practice Exercises

Exercise 1: Convert to Conditional Text

Exercise 2: Create a Product Card

Exercise 3: Fix the Bug

💡 Key Takeaways

Related Posts

Complete React File: `ConditionalTextClassesMasterClass.jsx`