[Feature Request]: exp props syntax

[MaxmaxmaximusGitHub]

Summary

Add exp prop syntax

Basic example

let prop = "propName"
<div [prop]="value"></div>

Alternatives

rest style

let prop = "propName"
<div {...{[prop]: "value"}}></div>

variable style

let prop = "propName"
let expProps = {[prop]: "value"}
<div {...expProps}></div>

Motivation

Motivation is the same as the creators of dynamic props in javascript: sugar.
Since jsx is sugar on top of javascript, and javascript has exp props, we need to add exp props to jsx tags, to support javascript semantics.

Detailed design

this:

let prop = "propName"

<div [prop]={ 1 + 2 } className="box"></div>

compile to:

let prop = "propName"

React.createElement("div", {
  [prop]    : 1 + 2,
  className : "box"
})

Usage example

function Component () {
  const inputValue = useInputValue('#input')
  const inputValue2 = useInputValue('#input2')

  return <div [inputValue]={inputValue2}><div>
}

[gaearon]

Thanks for the issue.
This is more of a JSX feature request, than React.

It has already been proposed in facebook/jsx#108, so let's track it there. There was also a different variation in facebook/jsx#21.

I think it's plausible something like this will make it into a future version. However, there is also less demand for this particular feature as people adopt static typing and it wouldn't work that well anyway.