reactjs - React, can you make an array of elements with Array(n).fill(0).map?

Question

It seems you can not, but I can not nail down why.

Here is my code that is causing the problem :

class App extends React.Component {

  render() {

    var elems = Array(~~(this.props.number)).fill(0).map( ()=> <div>test</div>);

    console.log(elems); //(5) [Object,Object,Object,Object,Object]

    return (
      {elems}
    )
  }
}

ReactDOM.render(<App number='5' />, document.querySelector('#app'))

The error points me to a page in the docs that says 'valid React element (or null) must be returned.'

Im following the example here

https://facebook.github.io/react/docs/lists-and-keys.html (Basic List Component)

thats using an array, so its possible, but somehow mines different.

Answer 1

As @Andrew Li pointed out, the original code is returning an non-React Element object which is the source of the error. React expects an object to be returned but the type, {elems: elems}, is invalid.

A React component may only (currently) return a single Element (see the caveat in the React Component docs) and not an array. Wrapping your array with a parent should do the trick.

class App extends React.Component {

  render() {

    var arr = Array(~~(this.props.number)).fill(0).map( ()=> <div>test</div>);

    return (
      <div>
        {elems}
      </div>
    )
  }
}