[{"data":1,"prerenderedAt":119},["ShallowReactive",2],{"qa-\u002Freact\u002Fcomponents\u002Fjsx-rendering":3},{"page":4,"siblings":99,"blog":116},{"id":5,"title":6,"body":7,"description":11,"difficulty":14,"extension":15,"framework":16,"frameworkSlug":17,"meta":18,"navigation":20,"order":21,"path":22,"questions":23,"questionsCount":89,"related":90,"seo":91,"seoDescription":92,"stem":93,"subtopic":94,"topic":95,"topicSlug":96,"updated":97,"__hash__":98},"qa\u002Freact\u002Fcomponents\u002Fjsx-rendering.md","Jsx Rendering",{"type":8,"value":9,"toc":10},"minimark",[],{"title":11,"searchDepth":12,"depth":12,"links":13},"",2,[],"easy","md","React","react",{"subtopicSlug":19},"jsx-rendering",true,1,"\u002Freact\u002Fcomponents\u002Fjsx-rendering",[24,28,32,36,40,45,49,53,57,61,65,69,73,77,81,85],{"id":25,"difficulty":14,"q":26,"a":27},"what-is-jsx","What is JSX and what does React do with it?","**JSX** is a syntax extension to JavaScript that lets you write HTML-like\nmarkup inside a `.js` or `.tsx` file. It is **not** valid JavaScript — a\nbuild tool (Babel, SWC, or the TypeScript compiler) transforms every JSX\nexpression into a `React.createElement` call before the browser sees it.\n\n```jsx\n\u002F\u002F What you write\nconst el = \u003Ch1 className=\"title\">Hello\u003C\u002Fh1>\n\n\u002F\u002F What the compiler produces (React 17+ JSX transform uses _jsx instead)\nconst el = React.createElement('h1', { className: 'title' }, 'Hello')\n```\n\nThe output is a plain JavaScript object — a **React element** — that\ndescribes what should appear on screen. React's renderer later turns that\ndescription into actual DOM nodes.\n\n**Rule of thumb:** JSX is syntactic sugar for `React.createElement`. If you\ncan't picture the compiled form, you don't yet fully understand what JSX is.\n",{"id":29,"difficulty":14,"q":30,"a":31},"jsx-single-root","Why must JSX always return a single root element?","Because JSX compiles to a single `React.createElement` call, which returns\none value. You can't return two values from one expression in JavaScript.\n\n```jsx\n\u002F\u002F ❌ Invalid — two adjacent elements at the top level\nreturn (\n  \u003Ch1>Title\u003C\u002Fh1>\n  \u003Cp>Body\u003C\u002Fp>\n)\n\n\u002F\u002F ✅ Wrap in a div\nreturn (\n  \u003Cdiv>\n    \u003Ch1>Title\u003C\u002Fh1>\n    \u003Cp>Body\u003C\u002Fp>\n  \u003C\u002Fdiv>\n)\n\n\u002F\u002F ✅ Or use a Fragment (no extra DOM node)\nreturn (\n  \u003C>\n    \u003Ch1>Title\u003C\u002Fh1>\n    \u003Cp>Body\u003C\u002Fp>\n  \u003C\u002F>\n)\n```\n\n**Rule of thumb:** when you need siblings without a wrapper DOM node, reach\nfor a Fragment (`\u003C>…\u003C\u002F>` or `\u003CReact.Fragment>…\u003C\u002FReact.Fragment>`).\n",{"id":33,"difficulty":14,"q":34,"a":35},"fragments","What are React Fragments and when should you use them?","A **Fragment** groups children without adding an extra node to the DOM.\nThere are two syntaxes:\n\n```jsx\n\u002F\u002F Short syntax — most common\nreturn (\n  \u003C>\n    \u003Cdt>Term\u003C\u002Fdt>\n    \u003Cdd>Definition\u003C\u002Fdd>\n  \u003C\u002F>\n)\n\n\u002F\u002F Long syntax — required when you need the key prop (e.g. in a list)\nreturn items.map(item => (\n  \u003CReact.Fragment key={item.id}>\n    \u003Cdt>{item.term}\u003C\u002Fdt>\n    \u003Cdd>{item.def}\u003C\u002Fdd>\n  \u003C\u002FReact.Fragment>\n))\n```\n\nUse Fragments when:\n- A wrapper `\u003Cdiv>` would break CSS layout (e.g. inside a `\u003Ctable>` or\n  flex\u002Fgrid container).\n- You're mapping over pairs of sibling elements that each need a `key`.\n\n**Rule of thumb:** prefer `\u003C>…\u003C\u002F>` by default; switch to the named form\nonly when you need to attach `key`.\n",{"id":37,"difficulty":14,"q":38,"a":39},"jsx-expressions","How do you embed JavaScript expressions in JSX?","Wrap any JavaScript **expression** in `{}`. An expression is anything that\nproduces a single value — a variable, function call, ternary, template\nliteral, etc.\n\n```jsx\nconst name = 'Alice'\nconst isAdmin = true\n\nreturn (\n  \u003Cdiv>\n    \u003Cp>Hello, {name.toUpperCase()}\u003C\u002Fp>\n    \u003Cp>Role: {isAdmin ? 'Admin' : 'User'}\u003C\u002Fp>\n    \u003Cp>Sum: {2 + 2}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n)\n```\n\n**What you cannot put in `{}`:**\n- Statements (`if`, `for`, variable declarations) — they don't produce a\n  value. Extract them above the return, or use expressions like ternaries\n  and `Array.map`.\n- Objects as children: `{myObject}` will throw; use `JSON.stringify` or\n  extract individual properties.\n\n**Rule of thumb:** if it can go on the right-hand side of `=`, it can go\ninside `{}`.\n",{"id":41,"difficulty":42,"q":43,"a":44},"jsx-vs-html-differences","medium","What are the key differences between JSX and HTML?","Several attribute names and rules differ:\n\n| HTML | JSX | Reason |\n|------|-----|--------|\n| `class` | `className` | `class` is a reserved JS keyword |\n| `for` | `htmlFor` | `for` is a reserved JS keyword |\n| `onclick` | `onClick` | Events use camelCase in JSX |\n| `\u003Cbr>` | `\u003Cbr \u002F>` | All tags must be closed in JSX |\n| `style=\"color:red\"` | `style={{ color: 'red' }}` | Style takes a JS object |\n| `tabindex` | `tabIndex` | camelCase for multi-word attributes |\n\n```jsx\n\u002F\u002F HTML\n\u002F\u002F \u003Clabel class=\"label\" for=\"email\" onclick=\"submit()\">Email\u003C\u002Flabel>\n\n\u002F\u002F JSX\n\u003Clabel className=\"label\" htmlFor=\"email\" onClick={submit}>Email\u003C\u002Flabel>\n```\n\nAdditionally, JSX is case-sensitive: `\u003Cdiv>` is a DOM element; `\u003CDiv>`\nwould be treated as a custom component.\n\n**Rule of thumb:** when an HTML attribute doesn't work in JSX, check if\nit's a reserved keyword or needs camelCase.\n",{"id":46,"difficulty":42,"q":47,"a":48},"boolean-attributes","How does JSX handle boolean attributes?","In JSX, omitting a value for an attribute is the same as setting it to\n`true`. You never write `disabled=\"true\"` — that's an HTML string, not a\nboolean.\n\n```jsx\n\u002F\u002F These are equivalent\n\u003Cinput disabled={true} \u002F>\n\u003Cinput disabled \u002F>\n\n\u002F\u002F Explicitly false — attribute is omitted from the DOM\n\u003Cinput disabled={false} \u002F>\n\n\u002F\u002F Dynamic\n\u003Cbutton disabled={isLoading}>Submit\u003C\u002Fbutton>\n```\n\nA common mistake is `disabled=\"false\"` — HTML treats any non-empty string\nas truthy, so the button would still be disabled. Always use `{false}`.\n\n**Rule of thumb:** use `{true}` \u002F `{false}` for any attribute that has a\nboolean semantic; never pass boolean values as strings.\n",{"id":50,"difficulty":42,"q":51,"a":52},"uppercase-component-names","Why must custom component names start with an uppercase letter in JSX?","JSX uses the case of the first letter to decide how to compile the tag:\n\n- **Lowercase** (`\u003Cdiv>`, `\u003Cspan>`) → `React.createElement('div', …)` —\n  passed as a **string**, rendered as a native DOM element.\n- **Uppercase** (`\u003CMyComponent>`) → `React.createElement(MyComponent, …)` —\n  passed as a **variable reference**, rendered as a React component.\n\n```jsx\n\u002F\u002F React treats 'button' as a DOM element — works as expected\nconst el = \u003Cbutton onClick={handle}>Click\u003C\u002Fbutton>\n\n\u002F\u002F React looks up `button` as a variable — ReferenceError if not defined\nconst el = \u003Cbutton \u002F>   \u002F\u002F ← lowercase: treated as DOM tag, fine\nconst el = \u003CButton \u002F>   \u002F\u002F ← uppercase: looks for a `Button` variable\n```\n\nIf you store a component in a lowercase variable, you must reassign it to\nan uppercase one before using it in JSX:\n\n```jsx\nconst components = { circle: CircleIcon }\nconst Icon = components['circle']   \u002F\u002F uppercase alias required\nreturn \u003CIcon \u002F>\n```\n\n**Rule of thumb:** always capitalize component names; use lowercase only\nfor HTML intrinsic elements.\n",{"id":54,"difficulty":14,"q":55,"a":56},"style-in-jsx","How do you apply inline styles in JSX?","The `style` prop takes a **JavaScript object**, not a CSS string. Property\nnames are camelCase versions of their CSS counterparts.\n\n```jsx\n\u002F\u002F ❌ HTML-style string — not valid in JSX\n\u003Cdiv style=\"color: red; font-size: 16px\">…\u003C\u002Fdiv>\n\n\u002F\u002F ✅ JSX object — note the double braces: outer {} for expression,\n\u002F\u002F    inner {} for the object literal\n\u003Cdiv style={{ color: 'red', fontSize: '16px', marginTop: 8 }}>…\u003C\u002Fdiv>\n```\n\nValues that are numbers (like `marginTop: 8`) are automatically converted\nto pixels for properties that accept pixel units. Values for others (like\n`opacity: 0.5`) are used as-is.\n\n**Rule of thumb:** for anything beyond a quick prototype, prefer CSS\nmodules or a utility class over inline styles — they don't support media\nqueries or pseudo-selectors.\n",{"id":58,"difficulty":14,"q":59,"a":60},"jsx-comments","How do you write comments in JSX?","Comments inside JSX must be wrapped in `{}` and use the `\u002F* … *\u002F` syntax —\nnot `\u002F\u002F`, which would comment out the closing `}` as well.\n\n```jsx\nreturn (\n  \u003Cdiv>\n    {\u002F* This is a JSX comment — it won't appear in the rendered output *\u002F}\n    \u003Cp>Visible text\u003C\u002Fp>\n    {\u002F* \u003Cp>Commented-out element\u003C\u002Fp> *\u002F}\n  \u003C\u002Fdiv>\n)\n```\n\nOutside of JSX (above the `return`), normal JS comments work fine.\n\n**Rule of thumb:** `{\u002F* comment *\u002F}` inside JSX, `\u002F\u002F comment` outside.\n",{"id":62,"difficulty":42,"q":63,"a":64},"jsx-spread-attributes","How do you spread an object's properties onto a JSX element?","Use the spread syntax `{...obj}` to forward a set of props without listing\neach one individually.\n\n```jsx\nconst buttonProps = { type: 'button', disabled: false, 'aria-label': 'Save' }\nreturn \u003Cbutton {...buttonProps}>Save\u003C\u002Fbutton>\n\n\u002F\u002F Equivalent to:\nreturn \u003Cbutton type=\"button\" disabled={false} aria-label=\"Save\">Save\u003C\u002Fbutton>\n```\n\nA common pattern in wrapper components:\n\n```jsx\nfunction IconButton({ icon, children, ...rest }) {\n  \u002F\u002F `rest` captures all props not explicitly destructured\n  return (\n    \u003Cbutton {...rest}>\n      \u003CIcon name={icon} \u002F>\n      {children}\n    \u003C\u002Fbutton>\n  )\n}\n```\n\n**Rule of thumb:** spread props enable flexible pass-through but make it\neasy to accidentally forward unknown props to DOM elements (which triggers\nReact warnings). Destructure known props and spread only the remainder.\n",{"id":66,"difficulty":14,"q":67,"a":68},"rendering-null","What happens when a component returns null?","Returning `null` renders **nothing** — the component mounts (lifecycle runs,\nrefs attach) but contributes no DOM nodes. It's the idiomatic way to\nconditionally hide output without unmounting.\n\n```jsx\nfunction Banner({ show, message }) {\n  if (!show) return null\n  return \u003Cdiv className=\"banner\">{message}\u003C\u002Fdiv>\n}\n```\n\nCrucially, returning `null` is different from not rendering the component\nat all:\n- `null` → component mounts; `useEffect` and refs still fire.\n- Conditional rendering (`{show && \u003CBanner \u002F>}`) → component is not mounted\n  when `show` is false; effects and state are destroyed.\n\n**Rule of thumb:** return `null` when you want the component in the tree\n(for effects or imperative refs) but invisible; use conditional rendering\nwhen you want it fully gone.\n",{"id":70,"difficulty":42,"q":71,"a":72},"rendering-arrays","How do you render an array of elements in JSX?","React can render an array of React elements as a child. The standard\napproach is `Array.map`:\n\n```jsx\nconst fruits = ['Apple', 'Banana', 'Cherry']\n\nreturn (\n  \u003Cul>\n    {fruits.map(fruit => (\n      \u003Cli key={fruit}>{fruit}\u003C\u002Fli>   \u002F\u002F key is required on the outermost element\n    ))}\n  \u003C\u002Ful>\n)\n```\n\nReact also accepts arrays returned directly:\n\n```jsx\nfunction Tags({ tags }) {\n  return tags.map(tag => \u003Cspan key={tag} className=\"tag\">{tag}\u003C\u002Fspan>)\n}\n```\n\nThings that React will **not** render as children: plain objects, `undefined`\n(silently skipped), and `false` (silently skipped — useful for short-circuits).\n\n**Rule of thumb:** always add a stable `key` to each element in a mapped\nlist; without it, React warns and may produce incorrect diffs.\n",{"id":74,"difficulty":42,"q":75,"a":76},"double-braces","What is the difference between single {} and double {{}} in JSX?","Single `{}` opens a JavaScript **expression slot** in JSX. Double `{{}}`\nis simply that expression slot containing an **object literal** — there's\nno special double-brace syntax.\n\n```jsx\n\u002F\u002F {} — expression slot\n\u003Cp>{count}\u003C\u002Fp>\n\n\u002F\u002F {{}} — expression slot containing an object literal\n\u003Cdiv style={{ color: 'red', fontSize: 16 }}>…\u003C\u002Fdiv>\n\u002F\u002F          ^outer: JSX expression  ^inner: JS object\n```\n\nThe confusion usually arises with `style` because it's the most common\nattribute that takes an object value.\n\n**Rule of thumb:** think of it as two separate things: \"open expression\"\nthen \"open object\". The outer `{}` is JSX; the inner `{}` is JavaScript.\n",{"id":78,"difficulty":14,"q":79,"a":80},"self-closing-tags","When must a JSX tag be self-closing?","In JSX, every element **must** be explicitly closed — either with a closing\ntag or with `\u002F>` for self-closing. This is stricter than HTML, where void\nelements like `\u003Cbr>` and `\u003Cimg>` don't require closing.\n\n```jsx\n\u002F\u002F ❌ HTML-style void element — invalid in JSX\n\u003Cinput type=\"text\">\n\u003Cimg src=\"photo.jpg\">\n\n\u002F\u002F ✅ Self-close when there are no children\n\u003Cinput type=\"text\" \u002F>\n\u003Cimg src=\"photo.jpg\" \u002F>\n\n\u002F\u002F ✅ Or use a closing tag (unusual for void elements, but valid JSX)\n\u003Cinput type=\"text\">\u003C\u002Finput>\n```\n\nCustom components can also be self-closed when you pass no children:\n`\u003CMyWidget \u002F>`.\n\n**Rule of thumb:** if an element has no children, self-close it with `\u002F>`;\nnever leave a tag unclosed in JSX.\n",{"id":82,"difficulty":42,"q":83,"a":84},"jsx-children-prop","How is the children prop passed and accessed in JSX?","Anything placed **between** opening and closing JSX tags is automatically\npassed as the `children` prop.\n\n```jsx\nfunction Card({ title, children }) {\n  return (\n    \u003Cdiv className=\"card\">\n      \u003Ch2>{title}\u003C\u002Fh2>\n      \u003Cdiv className=\"body\">{children}\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  )\n}\n\n\u002F\u002F Usage — the \u003Cp> and \u003Cbutton> become children\n\u003CCard title=\"Welcome\">\n  \u003Cp>Hello there!\u003C\u002Fp>\n  \u003Cbutton>OK\u003C\u002Fbutton>\n\u003C\u002FCard>\n```\n\n`children` can be a string, a single element, an array of elements, or\neven a function (render prop pattern). Use `React.Children` utilities if\nyou need to iterate or count children programmatically.\n\n**Rule of thumb:** `children` is just a prop; you can also pass it\nexplicitly as `\u003CCard children={\u003Cp>Hi\u003C\u002Fp>} \u002F>`, though the nested form is\nmore readable.\n",{"id":86,"difficulty":42,"q":87,"a":88},"conditional-in-jsx","Can you use an if statement directly inside JSX? What should you do instead?","No — `if` is a statement, not an expression, so it can't go inside `{}`.\nJSX only accepts expressions.\n\n```jsx\n\u002F\u002F ❌ if statement inside JSX — syntax error\nreturn (\n  \u003Cdiv>\n    {if (isLoggedIn) { return \u003CDashboard \u002F> }}\n  \u003C\u002Fdiv>\n)\n\n\u002F\u002F ✅ Ternary — an expression\nreturn (\n  \u003Cdiv>\n    {isLoggedIn ? \u003CDashboard \u002F> : \u003CLogin \u002F>}\n  \u003C\u002Fdiv>\n)\n\n\u002F\u002F ✅ Logical && — renders right side only if left is truthy\nreturn (\n  \u003Cdiv>\n    {isAdmin && \u003CAdminPanel \u002F>}\n  \u003C\u002Fdiv>\n)\n\n\u002F\u002F ✅ If\u002Felse above the return — perfectly fine\nlet content\nif (isLoggedIn) { content = \u003CDashboard \u002F> }\nelse { content = \u003CLogin \u002F> }\nreturn \u003Cdiv>{content}\u003C\u002Fdiv>\n```\n\n**Rule of thumb:** for simple two-path branches use a ternary; for one-side\nrendering use `&&`; for complex logic extract it above the `return`.\n",16,null,{"description":11},"React JSX interview questions — JSX syntax, transpilation, fragments, expressions, boolean attributes, and the differences between JSX and HTML.","react\u002Fcomponents\u002Fjsx-rendering","JSX and Rendering","Components","components","2026-06-23","yl8pAZz6eXYk_NZkXSaQAtjCi9t1s27W0dWeiEbz0pk",[100,101,104,108,112],{"subtopic":94,"path":22,"order":21},{"subtopic":102,"path":103,"order":12},"Props and Component Types","\u002Freact\u002Fcomponents\u002Fprops-component-types",{"subtopic":105,"path":106,"order":107},"Event Handling","\u002Freact\u002Fcomponents\u002Fevent-handling",3,{"subtopic":109,"path":110,"order":111},"Conditional Rendering","\u002Freact\u002Fcomponents\u002Fconditional-rendering",4,{"subtopic":113,"path":114,"order":115},"Lists and Keys","\u002Freact\u002Fcomponents\u002Flists-keys",5,{"path":117,"title":118},"\u002Fblog\u002Freact-jsx-rendering-guide","React JSX — A Complete Guide with Examples",1782244100865]