React: Allow template literals directly in JSX as attributes.

[Y-Less]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

Template literals are now the recommended way of formatting anything as a string, and the same applies to JSX:

return (
    <MyComponent className={`${classA} ${classB}`} />
);

This seems a tiny bit verbose. Not massive mind, but for every one of these you always open with {` and always close with `}. I don't know if those will render correctly, it's hard to type a literal backtick in markdown, so just in case brace-backtick and backtick-brace. Backticks are not valid in HTML or JSX, so it would be a very small QOL improvement if they could be used directly to specify attributes.

What is the expected behavior?

return (
    <MyComponent className=`${classA} ${classB}` />
);

This would be quite a special case of raw string literals. You couldn't use tags, such as:

return (
    <MyComponent className=tag`${classA} ${classB}` />
);

Without going back to the normal method:

return (
    <MyComponent className={tag`${classA} ${classB}`} />
);

And backticks anywhere but immediately starting an attribute would just be interpreted the same as now - as a literal character:

return (
    <div>
        This is a backtick: `
    </div>
);

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

16 at least.

[leeseean]

you are making a joke,too young too simple,stupid brain

[Y-Less]

too simple

Sorry, my mistake, I didn't realise feature requests had to be large and complex.

[Spenc84]

@leeseean Your comment is quite rude and doesn't add any value to this forum. Questions asked in earnest shouldn't ever be belittled.

Y-less is simply proposing a quality of life improvement. JSX already supports string literals in the form of attribute="foo" and attribute='foo'. If there is a valid reason why React's transpiler couldn't also be updated to recognize attribute=`foo` then provide that reasoning rather than a demeaning remark.

Though it may seem a simple thing, writing attribute=`foo` certainly is cleaner than attribute={`foo`}.

[schibrikov]

Totally agree.
It would make a perfect sense.

[kunukn]

I like the idea, but I believe this is invalid JSX.
JSX value should be either an expression or a quoted JSX text

Maybe make a proposal for the JSX spec?

https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwEwlgbgBAxgNgQwM5IHIILYFMC8ADAVyTADsBzAWgCMEYBrAFzHqTwHoA-IA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3&externalPlugins=

[kunukn]

https://github.com/babel/babel/issues/2309

https://github.com/facebook/jsx/issues/25

[aweary]

The JSX syntax is not part of React and is shared by many other libraries, so the specification itself would need to be changed. There's already an open issue for this on the jsx repo so feel free to add your input there!