Conditional Rendering

Conditional Rendering ဆိုတာ condition အလိုက် UI မတူအောင်ပြတာပါ။ Login ဝင်ထားရင် dashboard ပြ၊ မဝင်ထားရင် sign in button ပြ—ဒီလို app logic တွေကို React မှာ JavaScript condition နဲ့ရေးနိုင်ပါတယ်။

function Greeting({ isLoggedIn, userName }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back, {userName}!</h1>
      ) : (
        <h1>Please sign in to continue.</h1>
      )}
    </div>
  );
}

function App() {
  return <Greeting isLoggedIn={true} userName="Sai" />;
}

`isLoggedIn` က true ဖြစ်ရင် welcome message ပြပြီး false ဖြစ်ရင် sign in message ပြပါတယ်။ ဒီ pattern ကို auth UI, empty state, loading state တွေမှာနေ့တိုင်းသုံးရပါတယ်။

`Welcome back, Sai!` ဆိုတဲ့ heading ပေါ်လာမယ်။