How to add a comma in array.map after every element except last element in React JSX

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

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>

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>

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>

How to add a comma in array.map after every element except last element in React JSX

Related

Recent Posts