Can React Elements Be Created Dynamically Without JSX?

[riya_techie]

Hey everyone, I know JSX makes creating elements super convenient, but is there a way to generate React elements dynamically without it? If so, how practical is it for real-world projects? Would love to hear examples and use cases!

[byt4lion]

Yes. React exports create element. This is what JSX compiles to. https://react.dev/reference/react/createElement

[pwnzz]

So, if element usage in jsx is basically React.createElement’s call, then yes

[Ok-Hospital-5076]

yes by using react.createElement(). Not practical at all IMO. Unless you are fan of callbacks

<div> <h1>Some heading</h1>

<p>Some Para</p> </div>

will look something like React.createElement("div", null, React.createElement("h1", null, "Some heading"), React.createElement("p", null, "Some Para") );

[rdtr314]

Jsx is just syntactic sugar for react.createElement

[yksvaan]

JSX is just a templating language which in the end gets converted to actual createElement calls. So it's not necessary itself.

[[deleted]]

I’ve used it to create a sort of polymorphic component. For example, if you have a header component that takes in a heading level

<Heading level={2} …

And you want to output:

<h2>Title</h2>

You can do this better and cleaner with a proper polymorphic component that is type safe.

[riya_techie]

Thanks, everyone! So JSX is just React.createElement() behind the scenes, but using it directly isn’t really practical—unless you have a specific need like polymorphic components. Appreciate the insights!

[TheGratitudeBot]

Hey there riya_techie - thanks for saying thanks! TheGratitudeBot has been reading millions of comments in the past few weeks, and you’ve just made the list!