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 sp

Answer 1

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>,

Answer 2

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;
    }
  })
}