React Conditional Rendering (img: refine.dev)

Selamlar!

Frontend kısmında çoklukla javascript ile kullandığımız koşullu ifadeleri (if, else if, else,) React ile de kolaylıkla yazılabiliyor ve kullanılıyor. Bu kısımda React’te koşullu ifadeleri nasıl yazıyoruz ona değineceğiz. Bu konu React dökümanında “Conditional Rendering” şeklinde geçiyor, o kısımdan da detaylı bilgi alabilirsiniz.

1.Klasik if-else Kullanımı

JSX dışında, bir değişkeni önceden koşula göre tanımlayarak kullanabiliriz.

function App() {
  const isLoggedIn = true;
  let message;

  if (isLoggedIn) {
    message = <h1>Welcome back!</h1>;
  } else {
    message = <h1>Please sign in.</h1>;
  }

  return <div>{message}</div>;
}

2. if-else JSX İçinde Kullanımı

JSX içinde if kullanamazsınız ama ternary operator (? :) kullanabilirsiniz.

function App() {
  const isLoggedIn = true;

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

3. else if Kullanımı

React’te doğrudan else if kullanamazsınız, ancak bunu birden fazla if kontrolüyle veya ternary operator ile yapabilirsiniz.

function App() {
  const userRole = "admin";

  return (
    <div>
      {userRole === "admin" ? (
        <h1>Welcome Admin!</h1>
      ) : userRole === "editor" ? (
        <h1>Welcome Editor!</h1>
      ) : (
        <h1>Welcome Guest!</h1>
      )}
    </div>
  );
}

4. if Kullanımı ve return İçinde Koşullu Rendering

Eğer bir koşul için JSX’yi tamamen göstermek veya gizlemek istiyorsanız, if kullanabilirsiniz.

function App() {
  const isLoggedIn = true;

  if (!isLoggedIn) {
    return <h1>Please sign in.</h1>;
  }

  return <h1>Welcome back!</h1>;
}

5. Short-Circuit Evaluation (&& Operatörü)

Koşul doğruysa bir JSX parçasını göstermek için && kullanabilirsiniz.

function App() {
  const isLoggedIn = true;

  return (
    <div>
      {isLoggedIn && <h1>Welcome back!</h1>}
      {!isLoggedIn && <h1>Please sign in.</h1>}
    </div>
  );
}

6. switch Kullanımı

Birden fazla koşul kontrolü gerektiğinde switch kullanılabilir.

function App() {
  const userRole = "editor";
  let message;

  switch (userRole) {
    case "admin":
      message = <h1>Welcome Admin!</h1>;
      break;
    case "editor":
      message = <h1>Welcome Editor!</h1>;
      break;
    default:
      message = <h1>Welcome Guest!</h1>;
  }

  return <div>{message}</div>;
}

7. Koşul İçinde Değer Atama

Koşula göre değişken veya JSX atanabilir.

function App() {
  const userRole = "guest";
  const isAdmin = userRole === "admin";

  return (
    <div>
      <h1>{isAdmin ? "Admin Panel" : "User Panel"}</h1>
    </div>
  );
}

Bu yöntemlerle React’te if, else if, else, ve diğer koşullu işlemleri kolayca kullanabilirsiniz. Hangisini seçeceğiniz ihtiyaçlarınıza ve kod stilinize bağlıdır.

Anladığım kadarıyla anlatmaya çalıştım. Umarım faydalı olmuştur. Başka bir blog yazısında görüşmek üzere 🙂

Gönderilere yorum yazabilir veya @huseyineskan instagram hesabımdan benimle iletişime geçebilirsiniz.