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

Use nested array to keep "," outside.

  

      {this.props.data.map((element, index) => index == this.props.data.length - 1 ? {element} : [{element}, ", "])}
  

Optimize it by saving the data to array and modify last element instead of checking if its last element all the time.

  let processedData = this.props.data.map((element, index) => [{element}, ", "])
  processedData [this.props.data.length - 1].pop()
  

      {processedData}