Unexpected Token = on event handle on reactjs v15 -

i playing reactjs v15 on copen. got unexpected token = error on line

  _handleclick = (e) => {     console.log(reactdom.finddomnode(this.refs.input));   } 

here react code on codepen: https://codepen.io/dotku/pen/qqwgvv?editors=1010

class welcome extends react.component {   _handleclick = (e) => {     console.log(reactdom.finddomnode(this.refs.input));   }   render() {     return <div>       <h1>hello, {this.props.name}</h1>       <button onkeypress={this._handleclick}>click</button>       <input ref="input"/>     </div>;   } }  const element = <welcome name="sara" />; reactdom.render(   element,   document.getelementbyid('root') ); 

anyone has idea why?

change code this. use conventional function instead of arrow function , bind either in constructor, or inside render function.

// class input extends react.component { //   render() { //     return <input type="text" value="ainput"/>; //   } // } class welcome extends react.component {   _handleclick(e) {     console.log(reactdom.finddomnode(this.refs.input));   }   render() {     return <div>       <h1>hello, {this.props.name}</h1>       <button onkeypress={this._handleclick.bind(this)}>click</button>       <input ref="input"/>     </div>;   } }  const element = <welcome name="sara" />; reactdom.render(   element,   document.getelementbyid('root') ); 

an alternative given in comment above needs enable experimental features in babel mentioned, if need go ahead arrow functions. following npm command trick.

npm install --save-dev babel-plugin-transform-class-properties 

alternatively enabling stage 2 features in babel, trick if need stick in arrow functions.

npm install --save-dev babel-preset-stage-2