Template literals as string content in JSX

Question

I\'m wondering whats the best practice for strings values mixed with variables inside JSX tags, I\'ve listed the options I\'m familiar with:

render() {
    c         


        

Answer 1

Template literals aren't supported by React JSX currently. The correct way to do it is like so:

<h1>Total count: {this.state.totalCount}</h1>

Edit: Your third way is also correct, but I personally wouldn't recommend it because of debug issues as you would need to scan for brackets as the code expands

<h1>{`Total count: ${this.state.totalCount}`}</h1>