JSX and Elements

Dense JSX idioms for writing markup, expressions, conditionals, and host element props in React.

Function Component Return

A function component returns React nodes - usually JSX - from a single return. The return is what React commits to the tree for that component instance.

function Greeting({ name }: { name: string }) {
  return <h1>Hello, {name}</h1>;
}

JSX Expressions in Curlies

Anything inside {...} is a JavaScript expression evaluated during render. Use it for text, attributes, and nested elements - not for statements like if or for.

const total = items.reduce((n, i) => n + i.price, 0);
return <p>Total: {total.toFixed(2)}</p>;

Conditional with Ternary

Use a ternary when you need either-or UI branches in JSX. Keep each branch small so the tree stays readable.

return (
  <main>{isLoading ? <Spinner /> : <Profile user={user} />}</main>
);

Conditional with Logical And

condition && <Node /> renders the node only when the left side is truthy. Avoid using numbers as the condition if 0 would incorrectly appear as text.

return (
  <header>
    {isAdmin && <AdminBadge />}
    <h1>{title}</h1>
  </header>
);

Fragment Shorthand

Fragments group siblings without adding a DOM node. Prefer <>...</> unless you need a key on the fragment.

return (
  <>
    <dt>{term}</dt>
    <dd>{definition}</dd>
  </>
);

Fragment with Key

When mapping produces multiple siblings per item, use <Fragment key={...}> because the short syntax cannot take props.

import { Fragment } from "react";
 
items.map((item) => (
  <Fragment key={item.id}>
    <dt>{item.term}</dt>
    <dd>{item.definition}</dd>
  </Fragment>
));

className vs class

DOM elements take className, not class, because class is reserved in JavaScript. String-build class lists the same way you would in plain HTML.

return (
  <button className={`btn ${active ? "btn-active" : ""}`} type="button">
    Save
  </button>
);

Inline Style Object

The style prop expects a camelCased object of CSS properties, not a CSS string. Values for dimensions are often numbers (pixels) or unit strings.

return (
  <div style={{ display: "flex", gap: 8, maxWidth: "40rem" }}>
    {children}
  </div>
);

Spreading Props onto Elements

Spread a props object onto a host or custom component when forwarding attributes. Pull out known props first so you do not overwrite intentional values.

function TextField({ label, ...inputProps }: TextFieldProps) {
  return (
    <label>
      {label}
      <input {...inputProps} />
    </label>
  );
}

Boolean Attributes

Pass true/false (or omit when false) for HTML boolean attributes. React normalizes them for the DOM correctly.

return (
  <button type="submit" disabled={isPending} aria-busy={isPending}>
    Submit
  </button>
);

Children as Text and Nodes

Children can be text, elements, arrays, or null. Parents receive them as props.children without special syntax on the call site.

return (
  <Card>
    Welcome back, <strong>{user.name}</strong>
  </Card>
);

Creating Elements with createElement

JSX compiles to createElement (or the automatic runtime). Use it when building elements dynamically without JSX.

import { createElement } from "react";
 
const el = createElement("button", { type: "button", onClick }, "Click");

Self-Closing Tags

Components and void HTML tags may self-close when they have no children. Custom components with no children should use the same form for consistency.

return (
  <section>
    <Avatar user={user} />
    <hr />
  </section>
);

Nested Components in JSX

Any component in scope can be used as a tag. Composition is the default way to build UI hierarchy in React.

return (
  <PageLayout>
    <Sidebar />
    <Article body={markdown} />
  </PageLayout>
);

Whitespace and Newlines

JSX largely follows HTML whitespace rules; newlines between tags often collapse. Put explicit spaces in expressions or text nodes when spacing must not collapse.

return (
  <p>
    Hello,{" "}
    <span className="name">{name}</span>
  </p>
);

Related

• Components and Props - how props flow into the JSX you write
• Lists Keys and Conditionals - mapping and branching at list scale
• TypeScript with React - typing props and event handlers used in JSX

External Related Links

• react.dev/reference - pure API reference (Hooks, built-in components, directives)
• react.dev - official React docs (Learn + full API reference)
• MDN Web Docs - authoritative HTML/CSS/JS reference

Stack versions: React 19 · TypeScript (strict) · modern JSX transform Y29kZWd1aWRlcy5pb3xjZ2lvODR8MjAyNjA3