Dynamic Rendering in React Conditional Rendering

Create a Login Status Component

Build a React component that displays 'Welcome back!' if a user is logged in and 'Please sign up.' if not, using a ternary operator.

Expected output: Component renders correct greeting based on isLoggedIn prop.

Hint: Use a boolean prop like isLoggedIn to control rendering.

Render Notification Badge

Create a component that shows a notification badge only if there are unread messages using the logical && operator.

Expected output: Notification badge appears only when unreadMessages array is not empty.

Hint: Check the length of the unreadMessages array.

Conditional rendering in React means displaying different UI elements or components based on certain conditions, typically using JavaScript expressions like if statements, ternary operators, or logical operators.

Use the logical && operator when you want to render a component or element only if a condition is true, and render nothing if it is false.

Nested ternary operators can make JSX hard to read and maintain, so it's better to use if statements or separate functions for complex conditional logic.