Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

template string of es6 in attribute of react component

I can use a double and single quote to concatenate my dynamic variable but template string is cleaner. I got an unexpected token, any clue why?

...
return (<UserList id={subactions} key=`applications${query.status}` />)
...
like image 618
Giala Jefferson Avatar asked Jun 08 '17 04:06

Giala Jefferson


People also ask

What is ES6 template string?

Template strings bring simple string interpolation to JavaScript. That is, they're a nice-looking, convenient way to plug JavaScript values into a string. In this example, ${user.name} and ${action} are called template substitutions . JavaScript will plug the values user.name and action into the resulting string.

How do you declare a string variable in React?

Use a template literal to concatenate strings and variables in React, e.g. "<a href={ https://example.com/${myPath} }". Template literals are delimited with backticks and allow us to embed variables and expressions using the dollar sign and curly braces ${expression} syntax.

Can we use ES6 in React?

React uses ES6, and you should be familiar with some of the new features like: Classes. Arrow Functions. Variables (let, const, var)


1 Answers

You need to change it to the code below.

return (<UserList id={subactions} key={ `applications${query.status}` } />)
like image 71
the_bluescreen Avatar answered Sep 28 '22 03:09

the_bluescreen