How to add comma between array items?

Question

How can I add a comma between the values, when using map function to print out all the values? (Using React, that's why I have the key etc.)

{ cars.map(car => {
    return(
      <p key={car.id}>{car.title} ,</p>
    );
}); }

This is how I would like the result to be, with no comma in the end of the last array item:

Audi, Nissan, Mazda, Toyota

Should I do it somehow like this?

{ cars.map((car, index) => {
  const separator = ", ";
  if(index === car.length - 1) {
     return(
       <p key={car.id}>{car.title} + separator </p>
     );
  }
}); 
}

Possible duplicate of Easy way to turn Javascript array into comma-separated list? — Glubus
– Glubus, Commented Aug 7, 2017 at 12:13

T.J. Crowder · Accepted Answer · 2021-07-16 09:43:35Z

12

You can know which call to map's callback is the last by using the index argument you get passed:

{cars.map((car, index) => {
    return(
        <p key={car.id}>{car.title} {index < cars.length - 1 ? ", " : ""}</p>
    );
})}

But note that p is usually a block element, so the cars would be stacked rather than shown inline with spaces (and commas) between them. I'd use span instead (although you can mark the p as inline if you want). I've used span below.

You can also use a concise arrow function rather than a verbose one with a function body:

{cars.map((car, index) =>
    <span key={car.id}>{car.title} {index < cars.length - 1 ? ", " : ""}</span>
)}

Live example:

const cars = [
    {id: 1, title: "Ford"},
    {id: 2, title: "Toyota"},
    {id: 3, title: "Lexus"},
];

ReactDOM.render(
    <div>{cars.map((car, index) =>
        <span key={car.id}>{car.title}{index < cars.length - 1 ? ", " : ""}</span>)
    }</div>,
    document.getElementById("root")
);

<div id="root"></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>

In a comment somewhere you asked how to make the space non-breaking (though I think that may have been because you were using inline-block with a p element, and so normal spaces weren't being rendered). To do that, just replace ", " with ",\u00A0" above.

const cars = [
    {id: 1, title: "Ford"},
    {id: 2, title: "Toyota"},
    {id: 3, title: "Lexus"},
];

ReactDOM.render(
    <div>{cars.map((car, index) =>
        <span key={car.id}>{car.title}{index < cars.length - 1 ? ",\u00A0" : ""}</span>)
    }</div>,
    document.getElementById("root")
);

<div id="root"></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>

edited Jul 16, 2021 at 9:43

answered Aug 7, 2017 at 12:12

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

Haroen Viaene Over a year ago

Why would you want a no-break space for , ?

T.J. Crowder Over a year ago

@HaroenViaene - That's a really good question. :-) I think there's a deleted comment somewhere where the OP asked for it to be non-breaking, I think because they were using p and I inexplicably used inline-block on the p to make things appear in a line...and normal spaces between inline-block elements aren't rendered. (I should have used inline). The comment is gone, but I must have had some reason for doing it (and for making this comment). But it was really weird, I've fixed it, thanks!

Thomas · Accepted Answer · 2017-08-07 12:25:02Z

6

Instead of complicating your markup and adding TextNodes between the Paragraphs, how about using CSS. It doesn't always have to be code.

/* just making the paragraphs inline */
div > p { display: inline-block; }

/* appending the commas */
div > p:after { content: ", " }

/* removing it for the last index */
div > p:last-of-type:after { content: "" }

<div>
  <p>Audi</p>
  <p>Nissan</p>
  <p>Mazda</p>
  <p>Toyota</p>
</div>

<div>
  <p>Audi</p>
  <p>Nissan</p>
  <p>Mazda</p>
  <p>Toyota</p>
</div>

answered Aug 7, 2017 at 12:25

Thomas

12.8k1 gold badge16 silver badges31 bronze badges

3 Comments

T.J. Crowder Over a year ago

Ha! This (with or without the inline-block) is what the OP should do if pseudo-elements are an option (e.g., it doesn't matter if the commas are actually in the content -- for copy & paste, etc).

Thomas Over a year ago

The inline-block is not important. I just wanted to get the result as showed in the question, Audi, Nissan, Mazda, Toyota in a single row, and do it with with paragraphs in the markup. That's all the display: inline-block is there for, it has nothing to do with the :after { content: ", " }.

T.J. Crowder Over a year ago

@userden: To get the non-breaking spaces you were looking for with the above, one option would be content: ",\00A0".

Collectives™ on Stack Overflow

How to add comma between array items?

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related