Conditional rendering React Questions

Apply conditional CSS in React using className with ternary, the cn() utility, and inline styles. Know which approach to use and when.

Render elements conditionally in React using if/else, ternary operators, logical AND, and null returns. Know the gotchas for each approach.

Conditional rendering in React is JavaScript control flow applied to JSX. Learn the four patterns, when to use each, and the gotchas that catch candidates off guard.

Use dangerouslySetInnerHTML to render HTML strings from a CMS or API, and always sanitize external content with DOMPurify to prevent XSS.

The key prop lets React match list elements across renders for efficient diffing. Using index as key is a common bug. Understand why and how to fix it.

Use map() to transform arrays into JSX elements. Know when to use filter() and flatMap(), and how to handle nested arrays and empty states.

Toggle element visibility in React by combining useState with conditional rendering or CSS. Know when to unmount vs keep mounted.

Objects cannot be mapped directly in JSX. Use Object.entries(), Object.keys(), or Object.values() to convert to arrays first, then map to JSX.