Please no
The {...} syntax is a non-standard extension to XML/HTML I think MS came first up with back in the day for XAML (WPF).
It's a hack to "fix" a shortcoming of the base language.
It does not compose, i.e. :
<DoStuff args={<DoMoreStuff args={...} />} />
does not work.
That would be
<DoStuff args={...}><DoMoreStuff args={...} /></DoStuff>
Still more readable than brackets hell like:
DoStuff(DoMoreStuff(DoEvenMoreStuff()))
^^^ Apples to oranges:
<DoStuff args={...}><DoMoreStuff args={...}> <DoEvenMoreStuff args={...}/> </DoMoreStuff> </DoStuff>
vs DoStuff(DoMoreStuff(DoEvenMoreStuff()))
Both of them you would split into indented lines when they become too long. And 1 becomes too long much faster.Also with 2 you can do
const todo = DoMoreStuff(DoEvenMoreStuff());
DoStuff(todo);
where as with 1 you cannot.With JSX you can do
const todo = <DoMoreStuff args={...}><DoEvenMoreStuff args={...}/></DoMoreStuff>;
<DoStuff args={...}>{todo}</DoStuff>
<DoStuff args={...} />