title: JSX return a html segment
body: <p>I have a simple loop to display something returned from a remote API:</p>
  
  <pre><code>&lt;p&gt;
  {
     Object.keys(today).map(function (key) {
       var item=today[key];
       return (
         &lt;a href={"/books/"+item.bookid+".html"} key={item.bookid}&gt;{item.title}&lt;/a&gt;
       );
     })
  }
  &lt;/p&gt;
  </code></pre>
  
  <p>This works perfectly fine. </p>
  
  <p>Now I want to add more output:</p>
  
  <p><code>&lt;a href={"/books/"+item.bookid+".html"} key={item.bookid}&gt;{item.title}&lt;/a&gt;({item.fromnow} years ago)</code></p>
  
  <p>When I do the above, I get an error : <code>Unexpected token</code>.</p>
  
  <p>If I move the <code>years ago</code> text to be inside the <code>&lt;a&gt;...&lt;/a&gt;</code>, it is fine:</p>
  
  <pre><code>&lt;a href={"/books/"+item.bookid+".html"} key={item.bookid}&gt;{item.title}({item.fromnow} years ago)&lt;/a&gt;
  </code></pre>
  
  <p>I am not sure if I have made myself clear. </p>
  
  <p>Of course, I can accept that the <code>xxx years ago</code> becomes a part of the link, but I need to know how to separate that part from the link. </p>
  
  <p>Your help is much appreciated.</p>