150

I have one component which is going to display Array of String. The code looks like this:

React.createClass({
  render() {
     <div>
        this.props.data.map(t => <span>t</span>)
     </div>
  }
})

It is working perfectly fine. i.e. if props.data = ['tom', 'jason', 'chris'], the rendered result in the page would be tomjasonchris.

Then, I want to join all the names by using comma, so I change the code to:

this.props.data.map(t => <span>t</span>).join(', ')

However, the rendered result is [Object], [Object], [Object].

I don't know how to interpret object to become react components to be rendered. Any suggestion?

19 Answers 19

239

A simple solution is to use reduce() without second argument and without spreading the previous result:

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map(t => <span>{t}</span>)
          .reduce((prev, curr) => [prev, ', ', curr])}
     </div>
  }
}

Without second argument, reduce() will start at index 1 instead of 0, and React is perfectly happy with nested arrays.

As said in the comments, you want to only use this for arrays with at least one item, because reduce() without second argument will throw with an empty array. Normally this should not be a problem, since you want to display a custom message saying something like 'this is empty' for empty arrays anyway.

Update for Typescript

You can use this in Typescript (without type-unsafe any) with a React.ReactNode type parameter on .map():

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map<React.ReactNode>(t => <span>{t}</span>)
          .reduce((prev, curr) => [prev, ', ', curr])}
     </div>
  }
}
18
  • 5
    If the array is empty and no initialValue was provided, TypeError would be thrown.. so it won't work for empty array. Nov 29, 2016 at 17:10
  • 11
    Note also that this recursively nests the prev array. e.g. [1, 2, 3, 4] becomes [[[1,",",2],",",3],",",4].
    – Tamlyn
    Feb 14, 2017 at 12:25
  • 3
    @Tamlyn: Do you think my original mention of your point in the answer ('React is perfectly happy with nested arrays') is clear enough or should I elaborate on this? Feb 15, 2017 at 10:32
  • 2
    Anyone made this solution work with React + TypeScript?
    – Matt Dell
    Nov 22, 2017 at 14:57
  • 1
    @Jstuff I eneded up having to use any. .reduce((prev: JSX.Element, current: JSX.Element): any => [prev, (<span>&nbsp;</span>), current])
    – Matt Dell
    Dec 1, 2017 at 15:45
34

You can use reduce to combine multiple elements of an array:

React.createClass({
  render() {
     <div>
        this.props.data
        .map(t => <span>t</span>)
        .reduce((accu, elem) => {
            return accu === null ? [elem] : [...accu, ',', elem]
        }, null)
     </div>
  }
})

This initializes the accumulator with null, so we can wrap the first item in an array. For each following element in the array, we construct a new array that contains all previous elements using the ...-operator, add the separator and then the next element.

Array.prototype.reduce()

4
  • 2
    thanks, exactly what I needed. You can remove the null check and ternary by initialising the accumulator as an empty array
    – Larry
    Sep 9, 2016 at 9:32
  • 10
    @Larry if you remove the null check and ternary, and pass [] as the initializer, how do you avoid a leading comma? ['a'].reduce((a, e) => [...a, ',', e],[]) yields [",", "a"]. Passing no initializer works unless the array is empty, in which case it returns a TypeError.
    – Guy
    Sep 14, 2016 at 8:04
  • 1
    @Guy you're absolutely correct - my error was that I was joining values with spaces, and missing the empty span in the rendered output
    – Larry
    Sep 14, 2016 at 10:05
  • I like this because it makes it explicit that you're relying on a null for the first item
    – icc97
    Sep 28, 2022 at 16:13
29

If I just want to render a comma-separated array of components, I usually find reduce too verbose. A shorter solution in such cases is

{arr.map((item, index) => (
  <Fragment key={item.id}>
    {index > 0 && ', '}
    <Item {...item} />
  </Fragment>
))}

{index > 0 && ', '} will render a comma followed by a space in front of all array items except the first one.

If you want to separate the second-to-last item and the last one by something else, say the string ' and ', you can replace {index > 0 && ', '} with

{index > 0 && index !== arr.length - 1 && ', '}
{index === arr.length - 1 && ' and '}
3
  • 2
    I like this, this solution is easiest to understand for a React newbie like me :)
    – Stardust
    Aug 9, 2021 at 18:48
  • 1
    You might more commonly see <Fragment></Fragment> as the shorthand <></>. In this case however the longer version must be used because each item in a list requires a unique key, and you can't add a key to <></>. However, you might not need <Item>, if item is already a component.
    – Coder
    Oct 27, 2021 at 11:20
  • The point of reduce is to be able to deal with the whole set in one go without edge cases, so you don't have to worry about off by one errors. Also for React you have to get more verbose by introducing the Fragment component that you can avoid with reduce.
    – icc97
    Sep 28, 2022 at 16:10
22

Update with React 16: It's now possible to render strings directly, so you can simplify your code by removing all the useless <span> tags.

const list = ({ data }) => data.reduce((prev, curr) => [ prev, ', ', curr ]);
1
  • If data is empty, it will throw an error (cannot reduce an empty array without giving a default value). However, you can make it work like that: .reduce((prev, curr) => (prev ? [prev, ', ', curr] : curr), null)}
    – vcarel
    Apr 7, 2022 at 20:05
11

The accepted answer actually returns an array of arrays because prev will be an array each time. React is smart enough to make this work, but is it is prone to causing problems in the future such as breaking Reacts diffing algorithm when giving keys to each result of map.

The new React.Fragment feature lets us do this in an easy to understand manner without the underlying issues.

class List extends React.Component {
  render() {
     <div>
        {this.props.data
          .map((t, index) => 
            <React.Fragment key={index}>
              <span> {t}</span> ,
            </React.Fragment>
          )
      </div>
  }
}

With React.Fragment we can simply place the separator , outside of the of the returned HTML and React won't complain.

4
  • 7
    Awesome solution, but you need to remove comma for last element of array
    – indapublic
    Mar 27, 2018 at 15:14
  • You can always use a turnery and the index to solve that.
    – Jstuff
    Dec 24, 2018 at 18:37
  • 3
    You can remove last comma with this modification: <React.Fragment key={index}> <span> {t}</span> {index === this.props.data.length - 1 ? '' : ','} </React.Fragment>
    – JohnP
    Jan 22, 2019 at 6:21
  • 3
    @JohnP It's easier to add it in front: <React.Fragment key={index}>{index ? ',' : ''}<span>{t}</span></React.Fragment>. Aug 2, 2021 at 11:18
9

the <span>{t}</span> you are returning is an object, not a string. Check the react docs about it https://facebook.github.io/react/docs/jsx-in-depth.html#the-transform

By using .join() on the returned array from map, you are joining the array of objects. [object Object], ...

You can put the comma inside the <span></span> so it gets rendered the way you want it to.

  render() {
    return (
      <div>
        { this.props.data.map(
            (t,i) => <span>{t}{ this.props.data.length - 1 === i ? '' : ','} </span>
          )
        }
      </div>
    )
  }

sample: https://jsbin.com/xomopahalo/edit?html,js,output

6

My variant:

{this.props.data
    .map(item => <span>{item}</span>)
    .map((item, index) => [index > 0 && ', ', item ])}
3

Using es6 you could do something like:

const joinComponents = (accumulator, current) => [
  ...accumulator, 
  accumulator.length ? ', ' : '', 
  current
]

And then run:

listComponents
  .map(item => <span key={item.id}> {item.t} </span>)
  .reduce(joinComponents, [])
1

Use nested array to keep "," outside.

  <div>
      {this.props.data.map((element, index) => index == this.props.data.length - 1 ? <span key={index}>{element}</span> : [<span key={index}>{element}</span>, ", "])}
  </div>

Optimize it by saving the data to array and modify last element instead of checking if its last element all the time.

  let processedData = this.props.data.map((element, index) => [<span key={index}>{element}</span>, ", "])
  processedData [this.props.data.length - 1].pop()
  <div>
      {processedData}
  </div>
0

This worked for me:

    {data.map( ( item, i ) => {
                  return (
                      <span key={i}>{item.propery}</span>
                    )
                  } ).reduce( ( prev, curr ) => [ prev, ', ', curr ] )}
0

As mentioned by Pith, React 16 allow you to use strings directly so wrapping the strings in span tags are no longer needed. Building on Maarten's answer, if you also want to deal with a custom message right away (and avoid throwing an error on empty array), you could lead the operation with a ternary if statement on the length property on the array. That could look something like this:

class List extends React.Component {
  const { data } = this.props;

  render() {
     <div>
        {data.length
          ? data.reduce((prev, curr) => [prev, ', ', curr])
          : 'No data in the array'
        }
     </div>
  }
}
0

This should return a flat array. Handle s case with non iterable first object by providing an initial empty array and filters the not needed first comma from the outcome

[{}, 'b', 'c'].reduce((prev, curr) => [...prev, ', ', curr], []).splice(1) // => [{}, 'b', 'c']
0

Am I the only who thinks there's a lot of needless spreading and nesting going on in the answers here? Points for being concise, sure, but it leaves the door open to issues of scale or React changing how they deal with nested arrays/Fragments.

const joinJsxArray = (arr, joinWith) => {
  if (!arr || arr.length < 2) { return arr; }

  const out = [arr[0]];
  for (let i = 1; i < arr.length; i += 1) {
    out.push(joinWith, arr[i]);
  }
  return out;
};

// render()
<div>
  {joinJsxArray(this.props.data.map(t => <span>t</span>), ', ')}
</div>

One array, no nesting. No sexy method chaining either, but if you find yourself doing this often you can always add it to the array prototype or wrap it in a function that takes a mapping callback as well to do it all in one go.

0
function YourComponent(props) {

  const criteria = [];

  if (something) {
    criteria.push(<strong>{ something }</strong>);
  }

  // join the jsx elements with `, `
  const elements = criteria.reduce((accu, elem) => {
    return accu === null ? [elem] : [...accu, ', ', elem]
  }, null);

  // render in a jsx friendly way
  return elements.map((el, index) => <React.Fragment key={ index }>{ el }</React.Fragment> );

}
0

With flatMap (supported in all mainstream modern browsers as of June 2022), you can do it in a single step, something like this:

const Demo = ({ data }) => <div>{data.flatMap(
    (t, i) => [...(i ? [', '] : []), <span key={i}>{t}</span>]
)}</div>

ReactDOM.render(<Demo data={['tom', 'jason', 'chris']} />, document.body)
body { font-family: sans-serif; }
span { color: firebrick; }
<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>

If index == 0, the callback returns [span]; else, it returns [text, span]. Because we used flatMap instead of map, the resulting 2d array of [[span], [text, span], [text, span]] is flattened to [span, text, span, text, span], which React can render.

0

You can use this cool library called lodash to join your array element. Also lodash provides plethora of functionalities to work with arrays and many more.

Install lodash

npm i lodash

Import lodash to your component. It's a common practice to use "_" for lodash import.

import _ from 'lodash';

If you have an array you can join it like this. You can use any separator.

let data = ['tom', 'jason', 'chris'];

<div>{_.join(data, ",")}</div>

Hope this would help someone.

-1
{errors.username.map((e,k) => <span key={k}>{e} <br/></span>)}

easiest way i could find.

1
  • This answer could be improved with an explanation as to why it resolves the issue presented in the question. Code-only answers are generally considered low-quality on Stack Overflow.
    – codewario
    Jun 3, 2022 at 18:32
-2

Simply add join() after map and put it inside tag:

<span>{this.props.data.map((item) => item).join(', ')}</span>
1
  • 1
    Surrounding it with span does not change the output [Object], [Object], [Object] Jan 7, 2022 at 16:13
-3

As of React 17, you can simply:

<div>
  {[1, 2, 3].map((e, i) => <p key={i}>{e}</p>)}
</div>

And it will render as:

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.