There’s a simple heuristic that JSX uses to determine what you’re trying to render.

Lowercase <div /> becomes React.createElement("div"). A string is used to create a host element (react-dom) by that name.

Uppercase <MyDiv /> becomes React.createElement(MyDiv). A function reference is used to create an element from a named component definition.

Object property <Module.Component /> becomes React.createElement(Module.Component). A function reference is used to create an element from a component definition, nested inside an object. (It also works with lowercase props.componentName. Give it a try!)

But you can do more without JSX than you can with it.

For examples, there’s no JSX equivalent for a conditional: React.createElement(someCondition ? FancyDiv : "div")

Take it home

How do you handle dynamic element creation?