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>
);
}
});
}
The comma separated list can be created by using implode() function. The implode() is a builtin function in PHP and is used to join the elements of an array.
Commas with More Than Two List Items. If there are more than two list items, those following US convention should use a comma before the conjunction (usually "and" or "or").
Answer: Use the split() Method You can use the JavaScript split() method to split a string using a specific separator such as comma ( , ), space, etc. If separator is an empty string, the string is converted to an array of characters.
Approach: This can be achieved with the help of join() method of String as follows. Get the Set of String. Form a comma separated String from the Set of String using join() method by passing comma ', ' and the set as parameters.
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>
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With