JSX in React — React Technical Interview Questions & Answers

JSX in React

JSX in React

  • JSX looks like HTML inside JavaScript. It is not HTML. The compiler (Babel in CRA, esbuild in Vite) turns <p className="x">{name}</p> into React.createElement('p', { className: 'x' }, name). You almost never write createElement by hand, but the viva may ask what JSX becomes. Say that sentence.
  • class is a reserved word in JavaScript, so the attribute is className. for on a label becomes htmlFor. Inline styles are a camelCase object, not a CSS string: style={{ fontSize: 18 }}. Expressions go in curly braces: {marks}, {ok ? 'Pass' : 'Fail'}, {items.map(...)}. You cannot put a for-loop statement inside those braces — only an expression.
  • One parent rule: a component’s return cannot be two sibling tags with nothing wrapping them. Use a div, a semantic tag, or a Fragment <> </>. Table cells often need Fragment because a wrapper div would be invalid HTML. Comments inside JSX are {/* like this */}, not <!-- HTML comments -->. Paste HTML into a component and this is the first error you hit.
  • Let’s do it on the board. const marks = 72; return <p className={marks >= 40 ? 'pass' : 'fail'}>Asha scored {marks}</p>; Screen: Asha scored 72 with class pass. Change marks to 30, class becomes fail. If you write class= instead of className, the class never lands on the DOM the way you expect.
  • Self-closing tags must close: <img />, <input />, <br />. In HTML you can get away with <input>. In JSX you cannot. Boolean attributes: <button disabled={busy} /> — pass a real boolean, not the string "false" (that is still truthy).
  • Trap list for exams: class= , <!-- --> , two roots, using if/for as statements inside JSX, forgetting that 0 && <Badge /> still shows 0. If you can avoid those six, JSX is no longer scary.
  • JSX in React — on screen: Asha scored 72 with class pass. {marks} is JS. className, not class.
JSX
   <p className="x">{name}</p>
         │ compile
         ▼
  createElement('p', { className: 'x' }, name)

Technical Interview Tip: className + {expr} + one parent.

Code Examples for JSX in React

Example

// JSX
const marks = 72;
const ok = marks >= 40;

export default function Result() {
  return (
    <p className={ok ? "pass" : "fail"}>
      Asha scored {marks}
    </p>
  );
}

JSX in React — on screen: Asha scored 72 with class pass. {marks} is JS. className, not class.

How to Explain JSX in React to an Interviewer

Why className instead of class?

class is a JS keyword

How do you show a variable inside JSX?

{name}

Can you return two <p> tags without a wrapper?

No Fragment or div