i am looking for a way to map over an array and seperating objects by a comma, except for the last one. There are plenty of questions regarding this topic, but i am looking for a solution that doesn't "bind" the comma before the rendered object, like:[About][, Other] Instead of this i am looking for: [About], [Other] since i am using an hover-effect on these objects and dont want the comma to be affected.
I tried these solutions but first one is what i described above
<span key={index} className="filter-tag">{ (index ? ', ' : '') + tag }</span>
and the second one doesnt do anything – strangely:
.filter-tag + .filter-tag::before {
display: inline-block;
white-space: pre;
content: ", ";
}
Has somebody another possibility for me, since i think there must be a pretty simple solution to this? Thanks in regard for an help!
Edit: I would already be happy, if the comma can be glued to be after the object like [About, ]
have you tried this?
EDITED with Anthony's comment
const arrayOfTags = [];
arrayOfTags.map((tag, index) => {
return <span key={index}>{tag}{`${index === arrayOfTags.length - 1 ? '' : ', '}`}</span>
});
when your iterated index is equals to length of array, doesnt put any comma
you dont need to use css pseudo elements with this solution