ECMA6 spread parameters in react-router

Question

I see a reactjs sample code written as,

var App = React.createClass({
render: function () {
    return (
      <div>
      <div className='content'>
            <RouteHandler {...this.state} />
      </div>
      </div>
      )
   }
})

This is the part that confuses me.

        <RouteHandler {...this.state} />

In this, RouteHandler custom element uses ... . And ECMA6 functions with splat/rest params use triple dots in their function definitions. So, why does the people use ... during function invocation (or) on the application side?

Answer 1

This is not the rest operator but the spread operator , applied to JSX attributes. See JSX Spread Attributes .

<RouteHandler {...this.state} /> is equivalent to React.createElement(RouteHandler, Object.assign({}, this.state)) .

Note that the Object spread and rest operators the JSX spread attributes feature is inspired from are not a part of the ES6 specification. There is a stage 1 proposal to include them in ES7. In the meantime, you can already use them by passing the --harmony option to the JSX compiler CLI, or the --stage 1 option to the babel CLI.