You can also use reduce to insert the separator between every element of the array:

render() {
  let myArray = [1,2,3];
  return (
    <div>
      {
        myArray
          .map(item => <div>{item}</div>)
          .reduce((acc, x) => acc === null ? [x] : [acc, ' | ', x], null)
      }
    </div>
  );
}

or using fragments:

render() {
  let myArray = [1,2,3];
  return (
    <div>
      {
        myArray
          .map(item => <div>{item}</div>)
          .reduce((acc, x) => acc === null ? x : <>{acc} | {x}</>, null)
      }
    </div>
  );
}

A simple solution is to use reduce() without second argument and without spreading the previous result:

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map(t => <span>{t}</span>)
          .reduce((prev, curr) => [prev, ', ', curr])}
     </div>
  }
}

Without second argument, reduce() will start at index 1 instead of 0, and React is perfectly happy with nested arrays.

As said in the comments, you want to only use this for arrays with at least one item, because reduce() without second argument will throw with an empty array. Normally this should not be a problem, since you want to display a custom message saying something like 'this is empty' for empty arrays anyway.

Update for Typescript

You can use this in Typescript (without type-unsafe any) with a React.ReactNode type parameter on .map():

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map<React.ReactNode>(t => <span>{t}</span>)
          .reduce((prev, curr) => [prev, ', ', curr])}
     </div>
  }
}

Good morning sir,

The function join is only applicable to an Array. Learn more about it here: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/join

THis function will join all the elements (in most of the cases, strings) from the array to a single string.

For your specific case since the author name is inside an object with the property name, you could do the following:

const authorNames = author.map(e => e.name).join(' ');
// authorNames will be now John Tom Jack

You will use the map method to transform that array to a new array containing only strings. Then you can join those strings with the join function.

// Example class component
class Thingy extends React.Component {
  render() {
    const names = [{ name: 'John'}, {name: 'Doe'}, {name: 'Snow'}];
    console.log('names', names);
    return (
      <div>
        <div>{names.map(e => e.name).join(' ')}</div>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Thingy />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Hope that helps.

Good morning sir,

The function join is only applicable to an Array. Learn more about it here: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/join

THis function will join all the elements (in most of the cases, strings) from the array to a single string.

For your specific case since the author name is inside an object with the property name, you could do the following:

const authorNames = author.map(e => e.name).join(' ');
// authorNames will be now John Tom Jack

You will use the map method to transform that array to a new array containing only strings. Then you can join those strings with the join function.

// Example class component
class Thingy extends React.Component {
  render() {
    const names = [{ name: 'John'}, {name: 'Doe'}, {name: 'Snow'}];
    console.log('names', names);
    return (
      <div>
        <div>{names.map(e => e.name).join(' ')}</div>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Thingy />,
  document.getElementById("react")
);

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Hope that helps.

You could use reduce without the initialValue argument:

a.reduce((acc, val) => [].concat(acc, delimiter, val));

This requires special care when a is an empty array. If that needs to be supported, then:

a.length ? a.reduce((acc, val) => [].concat(acc, delimiter, val)) : a;

Addendum

I just found out that TypeScript only allows the second argument of reduce to be omitted when reduce will return the same type as the array elements. Here we want to return a different type (T[] instead of T), yet start out with an implicit T initial value. Not possible.

So this restriction kills the beauty of the above JavaScript solution, as now we have to provide the second argument:

a.reduce<T[]>((acc, val) => acc.concat(delimiter, val), []).slice(1);

And with additional type specifications for the callback parameters:

a.reduce<T[]>((acc: T[], val: T) => acc.concat(delimiter, val), []).slice(1);