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

According to HTML standard, you don't suppose to have <p> and <a> directly inside <ul>. — Pavlo
– Pavlo, Commented Sep 4, 2014 at 20:53

Paul O'Shannessy · Accepted Answer · 2014-09-05 15:44:22Z

4

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

answered Sep 5, 2014 at 15:44

Paul O'Shannessy

2,49818 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brigand · Accepted Answer · 2014-09-05 01:54:54Z

3

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

edited Sep 5, 2014 at 1:54

Brigand

86.4k20 gold badges167 silver badges174 bronze badges

answered Sep 5, 2014 at 1:03

Zach

7,9503 gold badges23 silver badges26 bronze badges

1 Comment

Brigand Over a year ago

you could alternatively do function(participant, idx, array){ if (idx === array.length) .... I prefer it because you can then extract that function and use it in multiple contexts without changing anything.

Collectives™ on Stack Overflow

React Render Array in Mapped Return

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related