React using JS var inside quotes
<p>I just started learning React using tutorials on <a href="https://facebook.github.io/react/docs/tutorial.html#hook-up-the-data-model" rel="nofollow noreferrer">React site</a></p>

<p>I wanted to use ids for each element inside JSON array. After referring to <a href="https://stackoverflow.com/questions/21668025/react-jsx-access-props-in-quotes">this link</a>, I tried <code>&lt;div className="commentListElement" key={key} id={"comment-"+{key}} &gt;</code> it in my code, but it didn't work. </p>

<blockquote>
  <p>It shows <code>comment-[object Object]</code> </p>
</blockquote>

<p>And sadly <code>${key}</code> is also not working...!</p>

<p>Here's my code:</p>

<pre><code>  var data = [
    {id: 1, author: "Pete Hunt", text: "Sample Comment 1"},
    {id: 2, author: "Virginia Woolf", text: "Sample Comment 2"}
  ]

  var CommentList = React.createClass({
    render: function() {
      var commentNodes = this.props.data.map(function(comment, key) {
        return (
          &lt;div className="commentListElement" key={key} id={"comment-"+{key}} &gt;
          Key: {key} &lt;br /&gt;
          ID: {comment.id} &lt;br /&gt;
          Commented by {comment.author} &lt;br /&gt;
          Comment: {comment.text}
          &lt;/div&gt;
        );
      });
      return (
        &lt;div className="commentList"&gt;
          {commentNodes}
        &lt;/div&gt;
      );
    }
  })

  var CommentBox = React.createClass({
    render: function() {
      return (
        &lt;div className="commentBox"&gt;
          Hello, world! I am a CommentBox.
          &lt;CommentList data={data} /&gt;
        &lt;/div&gt;
      );
    }
  });
  ReactDOM.render(
    &lt;CommentBox /&gt;,
    document.getElementById('content')
  );
</code></pre>

<p>But I see this in my browser</p>

<p><a href="https://i.stack.imgur.com/nRZVi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nRZVi.png" alt="enter image description here"></a></p>

<p>What am I doing wrong?</p>