30

How can I add a trailing comma after every element of an array for making a list like:

INV, INV, INV, INV

Note that the last element doesn't have a trailing comma

Currently iterating the list with array.map:

var List = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.data.map(function(item) {
          return <div>{item}</div>;
        })}
      </div>
    );
  }
});

var data = ["red", "green", "blue"];

React.render(<List data={data} />, document.body);
Improve this question
11
  • 1
    you need a string in return? Commented Dec 19, 2017 at 7:19
  • 3
    You can try a simple hack: array.map((item, index) => (<div>{ (index ? ', ': '') + item}</div>)). What this will do is, check if index is valid, add a comma else blank string. And since 0 in JS is falsey, it will skip for 1st entry Commented Dec 19, 2017 at 7:20
  • 6
    arr.join(','); Commented Dec 19, 2017 at 7:20
  • 1
    data=data.map((x,i,arr)=>(i<arr.length-1)?x+',':x) Commented Dec 19, 2017 at 7:27
  • 4
    Dude just do .map and then .join.. example: array.map(c => c).join(',') Commented Feb 4, 2020 at 8:46

11 Answers 11

Reset to default
67

As commented you can use:

array.map((item, index) => ({ (index ? ', ': '') + item }))

Also, since you want to display text inline, using a div is not appropriate. Instead you can/should use an inline element like span

var List = React.createClass({
  render: function() {
    return (
      <div>
        {
          this.props.data.map(function(item, index) {
            return <span key={`demo_snap_${index}`}>{ (index ? ', ' : '') + item }</span>;
          })
        }
      </div>
    );
  }
});

var data = ["red", "green", "blue"];

ReactDOM.render(<List data={data} />, demo);
<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>

<div id="demo"></div>

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

5 Comments

Remember to add a key={index} to the <span> or you'll get a warning in the console
Just came across this and I wanted to say thanks for this solution! I'm also wondering why does index ? ',':'' work? :) I don't understand the logic behind it, as index is just a number?
@SJ19 Since we are prepending value, we have to make sure we dont add extra comma. So for that I do that ternary operator. Since in JS 0 is falsey, for first iteration, nothing will be added
@Rajesh OH, I kept thinking the other way around, I was wondering how it knew we were on the last index. Now it makes sense. Thanks! Smart solution.
great! wanted such way.
9

What you can do is, check the index of item, if index is not equals to the last item render the , otherwise nothing.

Write it like this:

{
    this.props.data.map((item, i, arr) => <span>{item} {i != (arr.length-1) ? ',' : ''}</span>)
}

You can also store the total data length in a separate variable and instead of checking the arr.length in each iteration check with that variable.

Working example:

var List = React.createClass({
  render: function() {
    return (
      <div>
        {
	   this.props.data.map((item, i, arr) => <span>{item} {i != (arr.length-1) ? ', ' : ''}</span>)
        }
      </div>
    );
  }
});

var data = ["red", "green", "blue"];

ReactDOM.render(<List data={data} />, document.body);
<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>

Improve this answer

Comments

8

Use the CSS adjacent sibling combinator (+) to add pseudo element (::before) with a comma to all sibling items, but the 1st:

const List = ({ data }) => (
  <div>
    {data.map((item, idx) => (
      <span className="item" key={idx}>{item}</span>
    ))}
  </div>
);

var data = ["red", "green", "blue"];

ReactDOM.render(<List data={data} />, demo);
.item + .item::before {
  display: inline-block;
  white-space: pre;
  content: ", ";
}
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="demo"></div>

Another option is to create a generic component that expects a list of items, and an optional separator, and maps the children to include the separator. This uses the index method detailed in Rajesh's answer.

Note: due to the old BabelJS version used by the SO snippet, I need to use <Fragment> instead of the shorter <> for a fragment.

const { Children, Fragment } = React;

const AddSeparators = ({ children, separator = ', ' }) =>
  Children.map(children, (child, idx) => (
    <Fragment>
      {idx ? separator : ''}
      {child}
    </Fragment>
  ));

const List = ({ data }) => (
  <div>
    <AddSeparators separator=" | ">
      {data.map((item, idx) => (
        <span key={idx}>{item}</span>
      ))}
    </AddSeparators>
  </div>
);

var data = ["red", "green", "blue"];

ReactDOM.render(<List data={data} />, demo);
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="demo"></div>

Improve this answer

8 Comments

Just an opinionated comment but I would prefer using JS instead. Also using a div and adding display: inline-block looks weird.
Why would you prefer JS in this case?
I prefer keeping UI changes to CSS and such manipulation to JS. Again, this is just my preference/opinion. Yes using CSS would be more performant, but it might reduce readability.
I actually considers this a part of the design, thus fitting for CSS. Why would it reduce readability? I'm interested in knowing your opinion :)
@Rajesh - your feeling is incorrect in this case :) Pseudo elements and content are indeed a grey area. The question is - are the commas part of the content itself, or are they part of the design? And you can answer it both ways. I'm not sure about readability though. On one hand it might be confusing - "where is the comma coming from?". On the hand it reduces noise in the JSX, and a short inspect will show you where it comes form. So, as you stated - a matter of opinion.
|
2 

const data = ["red", "green", "blue"];

class List extends React.Component{
render(){
return( 
<div>
{this.props.data.map((item, index) => {
  return <span>{ (index ? ', ' : '') + item }</span>;
})}
</div>
)
}
}

ReactDOM.render(
<List data={data}/>,
document.getElementById('demo')
)
<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>

<div id="demo"></div>

Improve this answer

Comments

2

just do it like this:

<div>{array.join(',')}</div>

Improve this answer

Comments

1

As specified by @toxxiczny we can use joins in javascript.

array.join(', ');

Improve this answer

Comments

0

try array.toString()

you will get INV, INV, INV, INV

Improve this answer

Comments

0

Comma + Natural word wrapping

Here's a way to do it while maintaining proper linebreaks with the comma.

['red', 'green', 'blue']
  .reduce((a, b, index) => [
    ...a,
    <Fragment key={`comma-${index}`}>{', '}</Fragment>,
    <Fragment key={`value-${index}`}>{b}</Fragment>
  ], [])
  .slice(1);

Why not group the comma in the map function?

In word-wrapping scenarios, the comma is attached to the following word, when it should be attached to the immediate left word.

Why not [...a, ',', b]?

React needs a key to map the proper item within the virtual DOM (to avoid repaints on re-render). Plus it won't throw a key warning on lower environments

Why is there slice?

Because of the 3rd argument of reduce, the first iteration always adds a comma. slice(1) shifts the array by 1. This also makes it easier to understand the code instead of adding a logic statement inside the reduce function.

Do I have to use <Fragment />?

You can use any component instead of Fragment, like a span or your custom component.

Improve this answer

Comments

-1 

var List = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.data.map(function(item) {
          return <div>{item.join(",")}</div>;
        })}
      </div>
    );
  }
});

var data = ["red", "green", "blue"];

React.render(<List data={data} />, document.body);

Improve this answer

Comments

-2

I know this is late, but this is BY FAR the easiest way without any functions. Works great in inline statements and requires no separate functions or mapping if that's what's needed in your case.

const items = [1, 2, 3, 4, 5];

console.log("Items: " + "" + items + ".")

The ""+ before the array adds the comma for some reason I don't fully understand why.

Improve this answer

Comments

-2 

var List = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.data.map(function(item) {
          return <div>{item.join(",")}</div>;
        })}
      </div>
    );
  }
});

var data = ["red", "green", "blue"];

React.render(<List data={data} />, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Improve this answer

1 Comment

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.