React Render Array in Mapped Return

Question

I have a react component that is rendering some results. The problem I am having is with result.participants. This is an array, so map is rendering both names without any spacing and I am finding it difficult to get those spaces inserted.

The result.participants is an array of strings.

How do I insert a space or some logic to put in a comma and a space if the length is >1 ?

render: function(){
  return (
  <ul>
    {
      this.state.pads.map(function(result){
        return [
        <a href={result.pageUrl}>{result.title}</a>,
        <li key={result.participants}>Participants: {result.participants} </li>,
        <li key={result.summary}>Summary: {result.summary}</li>,
        <li key={result.lastEdit}>Last Edited: {new Date(result.lastEdit).toDateString()} </li>,
        <p></p>
        ];
      })}
  </ul>
)
}

Solution 1

Like a commenter mentioned, you should not put bare <a> and <p> tags into a <ul> directly. But that is beside the point, this question is about array handling in React.

You should be able to use a control flow structure nested in JSX like this:

{
  result.participants.map(function(participant, idx) {
    if (idx == result.participants.length - 1) {
      return (
        <span>{participant}, </span>
      );
    } else {
      return participant;
    }
  })
}

Solution 2

And if you don't care about wrapping each participant in a <span>, you could simply use the built-in Array.prototype.join method:

<li key={result.participants}>Participants: {result.participants.join(', ')} </li>,