DEV Community

Aman Kureshi
Aman Kureshi

Posted on

πŸ”€ Conditional Rendering in React

Conditional rendering means showing different UI based on a condition.

πŸ“˜ Example:

function Greeting({ isLoggedIn }) {
  return (
    <h2>{isLoggedIn ? "Welcome back!" : "Please log in"}</h2>
  );
}
Enter fullscreen mode Exit fullscreen mode

✨ Key Points:
β€’ Use ternary operator (? :) for simple conditions
β€’ Use && for short conditional rendering
β€’ Helps create dynamic user interfaces

Conditional rendering makes your React UI smart and interactive. πŸš€

Top comments (0)