ES6 React JSX returns an object instead of array

Question

After playing around with react I noticed a strange behavior while outputting array:

function bar1() {
  let arr = [0, 1];
  return arr.map((el) => foo(el))
}

function bar2() {
  let arr = [0, 1];
  arr = arr.map((el) => foo(el))
  return (
    {arr}
  )
}

function foo(key) {
  return (
    <div key={key}>Foo</div>
    )
}

I would expect bar1() and bar2() to output identical results, however bar2() throws error:

Objects are not valid as a React child (found: object with keys {arr}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.

I need to insert additional element in bar2() after map operation, that's why i can't use the simplified version.

Is it a bug related to JSX or it behaves as expected?

That error is self explanatory. React can't render Objects in render output. — Andy Ray
– Andy Ray, Commented Jan 14, 2017 at 0:18
It doesn't give me error in JSfiddle... jsfiddle.net/psiho/gL05ddfg — Mirko Vukušić
– Mirko Vukušić, Commented Jan 14, 2017 at 0:25

macbem · Accepted Answer · 2017-01-14 01:07:51Z

2

To answer your question - it's not a bug, it's an expected behavior.

When you return {arr}, you essentially return a {arr: arr} object because Babel understands it as an ES6 object shorthand (see property definition). In order to have the same output from both of your functions, you should remove the curly braces from your bar2() function's return statement.

answered Jan 14, 2017 at 1:07

macbem

1,2502 gold badges10 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

ES6 React JSX returns an object instead of array

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related