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

As mentioned by Pith, React 16 allow you to use strings directly so wrapping the strings in span tags are no longer needed. Building on Maarten's answer, if you also want to deal with a custom message right away (and avoid throwing an error on empty array), you could lead the operation with a ternary if statement on the length property on the array. That could look something like this:

class List extends React.Component {
  const { data } = this.props;

  render() {
     

        {data.length
          ? data.reduce((prev, curr) => [prev, ', ', curr])
          : 'No data in the array'
        }
     
  }
}