JSX Deep Dive: Embedding Expressions in React

Embed Variables and Functions in JSX

Create a React component that displays your name and the current time using embedded expressions.

Expected output: A rendered greeting with your name and the current time displayed dynamically.

Hint: Use variables for your name and a function to format the current time inside JSX.

Conditional Rendering Practice

Build a React component that shows 'Logged In' or 'Logged Out' based on a boolean variable using a ternary operator in JSX.

Expected output: The component displays 'Logged In' if true, otherwise 'Logged Out'.

Hint: Use a boolean variable and embed a ternary operator inside JSX to conditionally render text.

You can embed any valid JavaScript expression inside JSX, such as variables, function calls, arithmetic operations, and ternary operators, but not statements like if or loops.

You use JavaScript expressions like the ternary operator inside curly braces to conditionally render elements in JSX.

JSX only accepts expressions inside curly braces, and statements like if or for loops do not return values, so they cannot be embedded directly.