createElement()

// type:        the type of element (tag name string, component function, or class)
// props:       an object of attributes/properties (null if not needed)
// ...children: child elements (strings, numbers, React elements, etc.; multiple allowed)
React.createElement(type, props, ...children)

Argument	Overview
type	Specifies the type of element to create. Pass an HTML tag name as a string such as 'div' or 'span', or pass a function component or class component directly.
props	Specifies attributes and properties for the element as an object. Use the same key names as in JSX, such as className and onClick. Pass null when there are no props to provide.
...children	Specifies child elements. Strings, numbers, and React elements can be specified, and multiple values can be passed or provided as an array. If omitted, an element with no children is created.

An example of building a card-style component using only createElement() without any JSX.

// Card component
// Receives title and body as props and displays them in card format
function Card(props) {
  // Create the outer div element
  // className corresponds to the class attribute in JSX
  return React.createElement(
    'div',
    { className: 'card', style: { border: '1px solid #ccc', padding: '16px', borderRadius: '8px', marginBottom: '12px' } },

    // Pass a heading element as a child
    React.createElement(
      'h2',
      { style: { margin: '0 0 8px', fontSize: '18px' } },
      props.title  // pass a string as a text node
    ),

    // Pass a body element next (multiple children can be specified)
    React.createElement(
      'p',
      { style: { margin: 0, color: '#555' } },
      props.body
    )
  );
}

// App component (root component)
// Displays a list of cards
function App() {
  // Define the data to display as an array
  var items = [
    { id: 1, title: 'Kiryu Kazuma', body: 'The Dragon of Dojima. Former fourth chairman of the Tojo Clan.' },
    { id: 2, title: 'Majima Goro', body: 'The Mad Dog of Shimano. Owner of Majima Construction.' },
    { id: 3, title: 'Nishikiyama Akira', body: 'Childhood friend of Kiryu. Former fifth chairman of the Tojo Clan.' },
  ];

  // Convert the list to an array of React elements using map
  // key is required for React to efficiently detect differences in lists
  var cards = items.map(function(item) {
    return React.createElement(Card, { key: item.id, title: item.title, body: item.body });
  });

  // Pass the cards array to the outer div
  return React.createElement('div', null, cards);
}

// Mount to the root element
var root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App, null));

createElement() returns a React element (a plain object in the form { type, props, key, ref }). This return value is a virtual DOM node, not an actual DOM element. React compares virtual DOM at render time and only applies the necessary changes to the real DOM.

When using JSX, a transpiler (such as Babel) automatically converts JSX to React.createElement() calls at build time. For example, <Card title="React" /> is equivalent to React.createElement(Card, { title: 'React' }). JSX is purely syntactic sugar — everything ultimately goes through this function.

Since React 17, a new JSX transform (automatic runtime) was introduced, allowing JSX to be used without import React from 'react'. However, createElement() itself remains available and is still worth calling directly in scenarios where you need to determine the element type dynamically (such as switching tag names via a variable).

Related pages: JSX / cloneElement / createRoot

Forgetting null for the second argument (props)

Even when there are no props to pass, you must provide null as the second argument to createElement. If you omit the second argument entirely, the third and subsequent arguments may be misinterpreted, causing errors.

ng_example.jsx

// NG: omitting the second argument can cause the third argument to be misinterpreted
React.createElement('div', 'Kiryu Kazuma');
// The string is passed as props, not treated as a child element

Fixed:

ok_example.jsx

// OK: explicitly pass null when there are no props
React.createElement('div', null, 'Kiryu Kazuma');
// Interpreted correctly: props: null, children: 'Kiryu Kazuma'

Not specifying key for list elements

When generating lists with createElement, failing to specify the key property on each element will trigger React warnings and also degrade performance. Include key in the props object (the second argument).

ng_example.jsx

var fighters = ['Kiryu Kazuma', 'Majima Goro', 'Nishikiyama Akira'];

// NG: no key specified, so a warning is issued
var list = fighters.map(function(name) {
  return React.createElement('li', null, name);
});

Fixed:

ok_example.jsx

var fighters = ['Kiryu Kazuma', 'Majima Goro', 'Nishikiyama Akira'];

// OK: include key in the props object
var list = fighters.map(function(name) {
  return React.createElement('li', { key: name }, name);
});

The difference between passing a string and a function component as type

Passing a lowercase string such as 'div' as the type argument treats it as an HTML tag. When passing a function component, pass the function reference (the variable itself). If you pass a function component as a string, React will interpret it as a custom HTML tag and it will not function as a component.

ng_example.jsx

function FighterCard(props) {
  return React.createElement('p', null, props.name);
}

// NG: passing the function component as a string — it does not work as a component
React.createElement('FighterCard', { name: 'Majima Goro' });

Fixed:

ok_example.jsx

function FighterCard(props) {
  return React.createElement('p', null, props.name);
}

// OK: pass the function reference directly (not a string)
React.createElement(FighterCard, { name: 'Majima Goro' });