JSX vs HTML differences in React - Practice Questions

Challenge - 5 Problems

❓ component_behavior

intermediate

JSX attribute naming difference

What will be the rendered output of this React component regarding the attribute on the <input> element?

React

function MyInput() {
  return <input className="my-class" />;
}

A The input will have no class because 'class' is invalid in JSX.

B The input will have an attribute 'class' but React will warn about it.

C The input will have a CSS class named 'my-class'.

D The input will throw a syntax error because 'class' is not allowed.

💡 Hint

Remember that 'class' is a reserved keyword in JavaScript.

In JSX, the HTML attribute class cannot be used because 'class' is a reserved JavaScript keyword, causing a syntax error in the transpiled code. Use className instead.

📝 Syntax

intermediate

JSX self-closing tags requirement

Which option correctly writes the <img> element in JSX?

React

function Image() {
  return <img src="logo.png" />;
}

A Change to <img src="logo.png" />

B Change to <img src="logo.png"></img> (no change needed)

C Change to <img src="logo.png">

D Change to <img src="logo.png" />;</img>

💡 Hint

Think about how void elements like <img> should be handled in JSX.

In JSX, void elements like <img> should be self-closed with /> to follow XML-like syntax rules. Using a separate closing tag is discouraged and may trigger warnings.

🔧 Debug

advanced

Why does this JSX code cause an error?

Consider this React component code. Why does the event handler not work?

React

function Button() {
  return <button onClick={() => alert('Clicked!')}>Click me</button>;
}

A Because the button element must be self-closing in JSX.

B Because alert is not allowed inside JSX event handlers.

C Because arrow functions cannot be used inside JSX attributes.

D Because JSX uses camelCase for event handlers, it should be onClick, not onclick.

💡 Hint

Check the casing of event handler attributes in JSX.

JSX requires event handler attributes to be camelCase. Using onclick instead of onClick causes React to not recognize the event handler, which can cause errors or unexpected behavior.

❓ state_output

advanced

JSX expression evaluation inside attributes

What will be the value of the alt attribute in the rendered <img> element?

React

function Logo() {
  const name = 'React';
  return <img src="logo.png" alt={name + ' Logo'} />;
}

A The alt attribute will be 'React Logo'.

B The alt attribute will be '{name + ' Logo'}' as a string literal.

C The alt attribute will be empty because expressions are not allowed.

D The code will cause a syntax error due to string concatenation.

💡 Hint

Remember how JSX handles JavaScript expressions inside curly braces.

JSX allows embedding JavaScript expressions inside curly braces. The expression {name + ' Logo'} evaluates to the string 'React Logo', which is assigned to the alt attribute.

🧠 Conceptual

expert

Why does JSX use 'htmlFor' instead of 'for' in labels?

In JSX, the <label> element uses htmlFor instead of the HTML attribute for. Why is this change necessary?

A Because 'for' is deprecated in HTML5 and replaced by 'htmlFor'.

B Because 'for' is a reserved keyword in JavaScript, so JSX uses 'htmlFor' to avoid conflicts.

C Because React automatically converts 'for' to 'htmlFor' internally.

D Because 'htmlFor' is the standard attribute in HTML, not 'for'.

💡 Hint

Think about JavaScript language rules and how JSX is JavaScript syntax.

The word for is a reserved keyword in JavaScript used for loops. JSX is JavaScript syntax, so using for as an attribute name would cause syntax errors. React uses htmlFor instead to avoid this conflict.