Question 1

Why can't I use the standard "class" attribute for CSS styling in JSX?

Accepted Answer

In JSX, you must use "className" instead of "class" because JSX is actually JavaScript in disguise rather than pure HTML. Since "class" is a reserved keyword in the JavaScript language, React requires the use of "className" to avoid syntax conflicts. This follows a broader pattern in JSX where most attributes are written in camelCase to align with JavaScript naming conventions, such as using "onClick" instead of "onclick."

Question 2

What is a Fragment and when should I use one?

Accepted Answer

A Fragment is a built-in React feature that allows you to group multiple elements together without adding an extra node to the DOM. It is written as an empty set of angle brackets. You should use Fragments to satisfy the "Single Root" rule, which dictates that a component function can only return one parent element. Using a Fragment instead of a div prevents unnecessary clutter in your HTML structure, which helps maintain clean layouts and avoids breaking CSS tools like Flexbox or Grid.

Question 3

What is the "Zero Trap" in conditional rendering?

Accepted Answer

The "Zero Trap" occurs when using the logical AND operator (&&) to conditionally render UI based on a numeric value. In JavaScript, the number zero is considered "falsy," but React will still render "0" as a literal value on the screen. To avoid having a stray zero appear in your layout when a count is zero, you should convert the condition into a proper boolean, such as "count > 0," or use a ternary operator to explicitly return "null."

Question 4

Why is it discouraged to use an array index as a "key" prop when rendering lists?

Accepted Answer

Using an array index as a key can lead to significant UI bugs because the index is not a stable identity. If the list is reordered, filtered, or an item is deleted, the index for a specific piece of data changes, which confuses React's ability to track that element's state. This can cause issues like checkmarks or form inputs "jumping" to the wrong items. Instead, you should always use a unique, stable ID from your data, such as a database ID.

Question 5

How does JSX protect applications from Cross-Site Scripting (XSS) attacks?

Accepted Answer

JSX provides built-in security by automatically escaping all values embedded within it before they are rendered. This means that if a user inputs malicious code, such as a script tag, React treats it as literal text rather than executable code. If a developer intentionally needs to render raw HTML, they must use the "dangerouslySetInnerHTML" attribute, which serves as a loud, clear warning that the developer is opting into a potential security risk.

Why JSX Isn't Just HTML

How This Personalized Podcast Was Made

More like this