Create elements without JSX
A project cannot compile or embed JSX syntax.
React 19+ · Function
createElement
createElement constructs a React element from a type, props, and optional children. It is the programmatic alternative to JSX when direct element construction is needed.
How it works
Call createElement with a valid element type, an object or null for props, and any number of React-node children. It returns a React element object; special ref and key values are exposed separately from the ordinary props, while omitted ones become null.
Syntax
createElement(type, props, ...children)Parameters
| Name | Type | Description |
|---|---|---|
type | string | function | class | special component | A valid React component type, such as an intrinsic tag-name string, function component, class component, or special component. |
props | object | null | An object containing props, or null, which is treated like an empty object. |
...children | ReactNode[] | Zero or more React nodes, including elements, strings, numbers, portals, empty nodes, and arrays of React nodes. |
Returns
A React element object containing the supplied type, props excluding ref and key, and ref and key fields.
Key points
- The function creates a React element description rather than directly mounting or rendering UI.
- It provides a programmatic equivalent for code that cannot or does not want to use JSX.
- Its signature accepts one type, one props value, and a variadic list of children.
- The type can identify either a host element or a user-defined React component.
- Children are optional, so an element can be created without passing any child arguments.
- Child arguments support the broad React-node set, not only element objects.
- When supplied, a key is normalized to a string in the resulting element.
Common mistakes
- Do not pass primitives as the props argument; use an object or null.
- The type must be a tag-name string, function, class, or supported special component—not an arbitrary value.
- Do not expect ref or key to appear as ordinary entries in element.props.
Example: Create an element without JSX
import { createElement } from 'react';
function Greeting({ name }: { name: string }) {
return createElement('h1', { className: 'greeting' }, `Hello ${name}`);
}
const element = createElement(Greeting, { name: 'Ada' });
console.log(element);Creates a component element without JSX, passing a typed prop and a text child.
When to use it
Programmatic element construction
A library or renderer needs to build element descriptions from runtime values.
Dynamic component types
A component tree is generated from a dynamic tag or component reference.
Interview questions
QWhat does createElement do and what arguments does it accept?
createElement constructs a React element from a type, props value, and zero or more children. The type may be an intrinsic tag name or a React component, and props may be an object or null.
Follow-up: What can children contain? Any React nodes, including elements, strings, numbers, portals, empty nodes, and arrays of React nodes.
QWhat does a createElement result contain?
The returned element records the supplied type and props, excluding ref and key from element.props. A missing ref or key is represented as null, and key values are coerced to strings.
Follow-up: Where should code look for a key supplied during creation? On the returned element's key field, rather than in element.props.key.
QWhen would you use createElement instead of JSX?
createElement is the non-JSX alternative for creating React elements. It is useful when JSX cannot be used, but the documentation says JSX is normally preferred.
Follow-up: Why might a codebase still use it? A renderer, library, generated code path, or environment may need to construct elements directly without JSX syntax.
Related
JSXFragmentisValidElementcreateRoot