title: How to render react components by using map and join?
body: <p>I have one component which is going to display Array of String. The code looks like this:</p>
  <pre><code>React.createClass({
    render() {
       &lt;div&gt;
          this.props.data.map(t =&gt; &lt;span&gt;t&lt;/span&gt;)
       &lt;/div&gt;
    }
  })
  </code></pre>
  <p>It is working perfectly fine.
  i.e. if <code>props.data = ['tom', 'jason', 'chris']</code>, the rendered result in the page would be <code>tomjasonchris</code>.</p>
  <p>Then, I want to join all the names by using comma, so I change the code to:</p>
  <pre><code>this.props.data.map(t =&gt; &lt;span&gt;t&lt;/span&gt;).join(', ')
  </code></pre>
  <p>However, the rendered result is <code>[Object], [Object], [Object]</code>.</p>
  <p>I don't know how to interpret object to become react components to be rendered. Any suggestion?</p>