How to render react components by using map and join?

Question

I have one component which is going to display Array of String. The code looks like this:

React.createClass({
  render() {
     

        this.props         


        
      

Answer 1

The accepted answer actually returns an array of arrays because prev will be an array each time. React is smart enough to make this work, but is it is prone to causing problems in the future such as breaking Reacts diffing algorithm when giving keys to each result of map.

The new React.Fragment feature lets us do this in an easy to understand manner without the underlying issues.

class List extends React.Component {
  render() {
     

        {this.props.data
          .map((t, index) => 
            
               {t} ,
            
          )
      
  }
}

With React.Fragment we can simply place the separator , outside of the of the returned HTML and React won't complain.