🔹 React ES6 Ternary Operator (عملگر شرطی در React)

در این درس یاد می‌گیری عملگر شرطی سه‌تایی (Ternary Operator) در جاوااسکریپت و React JSX چطور استفاده میشه و چطور می‌تونی باهاش تصمیم‌گیری و شرط‌گذاری داخل کامپوننت‌ها انجام بدی.

🔸 تعریف Ternary Operator

عملگر سه‌تایی یا Ternary Operator (: ?) راهی کوتاه و ساده برای نوشتن شرط‌های if...else در یک خط است.

📘 ساختار کلی:

condition ? expressionIfTrue : expressionIfFalse;

📌 اگر شرط درست (true) باشد، قسمت اول اجرا می‌شود،
در غیر این صورت، قسمت دوم.

🔹 مثال ساده در جاوااسکریپت

const age = 20;
const result = age >= 18 ? "Adult" : "Minor";

console.log(result); // Adult

📌 اگر age >= 18 درست باشد، مقدار "Adult" برمی‌گردد، وگرنه "Minor".

🔹 استفاده در React JSX

در JSX نمی‌توان از if...else مستقیم استفاده کرد،
اما می‌توان با Ternary Operator شرط گذاشت.

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn ? <h2>Welcome back!</h2> : <h2>Please log in.</h2>}
    </div>
  );
}

📌 اگر isLoggedIn برابر true باشد، متن “Welcome back!” نمایش داده می‌شود،
در غیر این صورت “Please log in.”

🔹 مثال ۲: شرط داخل تگ‌ها

function UserStatus({ isOnline }) {
  return (
    <p>
      Status: {isOnline ? "🟢 Online" : "🔴 Offline"}
    </p>
  );
}

📌 مقدار داخل {} به کمک : ? تعیین می‌شود.

🔹 مثال ۳: چند شرط پشت سر هم

function Score({ value }) {
  return (
    <p>
      {value >= 90
        ? "Excellent"
        : value >= 70
        ? "Good"
        : value >= 50
        ? "Average"
        : "Fail"}
    </p>
  );
}

📌 چندین شرط زنجیره‌ای را می‌توان پشت سر هم نوشت (مشابه if-else if-else).

🔹 مثال ۴: استفاده برای نمایش کامپوننت‌ها

function Dashboard({ user }) {
  return (
    <div>
      {user ? <p>Hello, {user.name}!</p> : <p>Please sign in.</p>}
    </div>
  );
}

📌 با  ... : ... ? user  مشخص می‌شود که آیا کاربر وارد شده یا نه.

🔹 مثال ۵: JSX خالی (عدم نمایش بخش دوم)

اگر فقط در صورت درست بودن شرط بخوای چیزی نشون بدی،
می‌تونی قسمت false رو خالی بذاری یا از && استفاده کنی:

function Message({ show }) {
  return (
    <div>
      {show ? <p>Hello User!</p> : null}
    </div>
  );
}

📌 در صورت false، چیزی نمایش داده نمی‌شود.

🔹 مثال ۶: Ternary در کلاس‌ها و استایل‌ها

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

📌 از Ternary می‌توان برای تغییر کلاس CSS بر اساس props یا state استفاده کرد.

🔹 مثال ۷: استفاده در ترکیب با State

import { useState } from "react";

function ToggleButton() {
  const [active, setActive] = useState(false);

  return (
    <button onClick={() => setActive(!active)}>
      {active ? "Active ✅" : "Inactive ❌"}
    </button>
  );
}

📌 هر بار کلیک می‌کنی، state تغییر می‌کنه و متن دکمه با شرط ternary تغییر می‌کنه.

✅ نکته‌ها

✅ خلاصه

✅ نتیجه

Ternary Operator یکی از پرکاربردترین ابزارها برای شرط‌گذاری سریع و تمیز در JSX است.
کدت رو خلاصه‌تر، خواناتر و حرفه‌ای‌تر می‌کنه.