JSX Dynamics
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?