React: Allowing <{element}></{element}> in JSX to render a variable element

[rchanou]

You can now write almost anything in JSX that you can write in JavaScript...except for this case, as far as I can tell. Instead of having to write:

React.createElement(someDynamicElement, props, children)

I think it would be neat to be able to write:

 <{someDynamicElement} {...props}>
   {children}
 </{someDynamicElement}>

It's not a huge deal, but it would plug the last leak in JSX syntax, allowing people to not have to do a context switch and think about the underlying transform in order to figure out how to do something like this.

[cmwelsh]

This works if you remove the brackets... am I confused? Edit: Nevermind

 <someDynamicElement {...props}>
   {children}
 </someDynamicElement>

[cmwelsh]

You need to uppercase it so React knows it's not an HTML element.

[cmwelsh]

https://gist.github.com/sebmarkbage/f1f4ba40816e7d7848ad

[zpao]

Yea, this works since we'll just pass whatever is there along to createElement. You can even have a variable that is a string and a DOM component will be created. The point about capitalizing is important.

var D = 'div';
return <D {...props}/>

[rchanou]

And now I know...thanks!

[digital-flowers]

Amazing ! i love react.