📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
Tutorials › React Modern Development › Conditional Rendering

Conditional Rendering

5 min read
Render different content based on conditions. Use ternary: {isLoggedIn ? <Dashboard /> : <Login />}. Use && for optional content: {isAdmin && <Panel />}. Avoid using 0 with && — zero renders as the text '0'.

Conditional Rendering

function Dashboard({ user }) {
  // if/else
  if (!user) return ;

  return (
    

      {/* Ternary */}
      {user.isAdmin ?  : }

      {/* Short-circuit */}
      {user.notifications > 0 && (
        
      )}

      {/* Multiple conditions */}
      {user.role === "admin" && }
      {user.role === "mod"   && }
    

  );
}