React: idea : support object literal property value shorthand in jsx syntax

[bloodyowl]

the idea would be to be able to do :

{this.state.list.map((item, key) => <MyComponent {item, key} />)}

what would you think of it ?

[zpao]

I'm inclined to say no. We've talked a lot about making use of different syntaxes and we're trying to keep it as minimal as possible. Adding the {...spread} was already a pretty big deal.

cc @sebmarkbage

[sebmarkbage]

We try to keep syntax discussions over in: https://github.com/facebook/jsx That way we can have a wider group contributing to this syntax to make it worth it's extra weight to the language.

I think that the difference between <Foo {item} />, <Foo {...item} /> and <Foo item /> might be too confusing. The last two are already supported.

I like the way you think though. If you feel strongly about this you should open up an issue at https://github.com/facebook/jsx

[nojvek]

https://github.com/facebook/jsx/pull/118

^ A proposal for the object expression syntax as discussed here.

I think that the difference between , and might be too confusing.

Confusion might be relative. <Foo item /> is not very useful since it always evaluates to {item: true}. In hindsight it feels very limited, but I can understand it's behavior from it's html genes. I personally haven't found much use for it.

and aren't confusing if you look at it from ES8 object notation perspective. {item} is shorthand for {item: item}. {...item} is shorthand for flatten / shallow copy/ spread into a new object.

once someone understands that jsx transpiles to h(name: string | Component, props: {[name]: any}, ...children). ObjectExpression falls in naturally.

It's confusing that <Foo {x} /> is not supported but <Foo {...x} /> is supported. The workaround is
<Foo {...{x}} /> which is a lot more confusing.