0

I am trying to use the spread operator in react.js but getting the error Unexpected token ... in Chrome.

I am getting an error at the line 3 in this code:

var Btn=React.createClass({
    render: function(){
        var { className, ...other }=this.props;
        return (<a  {...other} className={joinClasses(className,"btn")} href="#" >{this.props.children}</a>);
    }
});

and using JSXtransformer.js for the compiling the JSX code.

What am I doing wrong that is causing the error?

jitin
  • 732
  • 8
  • 17

1 Answers1

2

Chrome does not support the ... token yet.

See this page for supported browsers (or see below).

Spread operation in array literals

  • Chrome - 46
  • Firefox - 16
  • Internet Explorer - No
  • Opera - No
  • Safari - 7.1

Spread operation in function calls

  • Chrome - 46
  • Firefox - 27
  • Internet Explorer - No
  • Opera - No
  • Safari - 7.1

Spread operation in destructuring

  • Chrome - No
  • Firefox - 34

See this answer to see how to set up the JSX Transformer to use "ES6 Transforms".

Community
  • 1
  • 1
Marcel Burkhard
  • 3,453
  • 1
  • 29
  • 35
  • This is JSX code not JS so I thought that the `...` symbol is implemented by react and not by the browser. Is that not so? – jitin Jun 19 '15 at 08:56
  • JSX transforms your html-ish stuff into function calls on the React.DOM namespace, but thats about it. So no – Marcel Burkhard Jun 19 '15 at 08:58
  • You can see the generated js here: https://facebook.github.io/react/jsx-compiler.html – Marcel Burkhard Jun 19 '15 at 08:59
  • On that page (the jsx compiler) there's an option to `Enable ES6 transforms (--harmony)` - that changes the code to something without a `...` - I think that's what I need. – jitin Jun 19 '15 at 09:04
  • Figured it out - all I had to do was this : use ` – jitin Jun 19 '15 at 09:05