如何在 array.map 中除 React JSX 中的最后一个元素之外的每个元素之后添加逗号

Question

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

Answer 1

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>

Answer 2

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>

Answer 3

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>

Answer 4

 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>

Answer 5

这样做：

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

Answer 6

try array.toString()

you will get INV, INV, INV, INV

Answer 7

正如@toxxiczny 所指定的，我们可以在javascript 中使用连接。

array.join(', ');

Answer 8

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.

Answer 9

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

Answer 10

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.

Answer 11

 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>

enter code here

---