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

Like a commenter mentioned, you should not put bare and

tags into a

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 (
        {participant}, 
      );
    } else {
      return participant;
    }
  })
}