Is there a JSX shortcut for assigning a value to a property when it has the same name?

Question

If I'm writing some JSX, is there a shortcut for some like this:

<MyComponent myProperty={myProperty} />

Such that I don't have to write myProperty twice?

I'm basically looking for a JSX equivalent to the literal object shorthand syntax in ES2015 and higher.

Answer 1

There is no such equivalent. The reason is that JSX mimics HTML syntax and for HTML both the following have a meaning:

// a property without value
<MyComponent myProperty />
// a property with a value
<MyComponent myProperty={myProperty} />

Therefore no shorthand syntax can be introduced.

You could use pure JS though:

 React.createElement("MyComponent", { myProperty });

or, you can pass all properties as a JS object:

<MyComponent {...{ myProperty }} />

I belive that both would decrease readability.