title: Unable to use Arrow functions inside React component class
body: <p>I've started a project where I use React JS for the front end an node js in backend. I used webpack for bundling up JS files. I used babel along with other necessary stuff. When I use arrow functions inside a react class, it gives a syntax error, like:</p>
  
  <blockquote>
    <p>Module build failed: SyntaxError: Unexpected token</p>
  </blockquote>
  
  <p>But I can use Arrow function in node without any issue.</p>
  
  <p>This is my webpack config file:</p>
  
  <pre><code>import path from 'path';
  import webpack from 'webpack';
  import 'react-hot-loader/patch';
  
  export default{
    devtool: 'eval',
    entry:[
      'react-hot-loader/patch',
      'webpack-hot-middleware/client?reload=true',
      path.join(__dirname,'client/index.js')],
    output:{
      path:'/',
      publicPath:'/'
    },
    plugins:[
      new webpack.NoErrorsPlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.HotModuleReplacementPlugin()
  
    ],
    module:{
      loaders:[
        {
          test:/\.js$/,
          include:path.join(__dirname,'client'),
          loaders: ['react-hot-loader/webpack', 'babel']
        },
        {
          test: /\.jpe?g$|\.gif$|\.svg$|\.png$/i,
          loader: 'file-loader?name=[name].[ext]'
        }
      ]
    },
    resolve:{
      extension:['','.js']
    }
  }
  </code></pre>
  
  <p>My React file:</p>
  
  <pre><code>class mapSidebar extends React.Component{
  
      constructor(props,context){
         super(props,context);
         this.state = {
           dataSource: []
         };
           this.handleUpdateInput = this.handleUpdateInput.bind (this);
      }
  
      handleUpdateInput = (value) =&gt; {
        this.setState({
          dataSource: [
            value,
            value + value,
            value + value + value,
          ],
        });
      };
  
      render(){
        return(
          &lt;div&gt;
            &lt;Paper zDepth={2}&gt;
              &lt;div&gt;Hello&lt;/div&gt;
              &lt;div&gt;
                  &lt;AutoComplete
                    hintText="Type anything"
                    dataSource={this.state.dataSource}
                    onUpdateInput={this.handleUpdateInput}
                  /&gt;
            &lt;/Paper&gt;
          &lt;/div&gt;
        );
      }
  
  }
  
  export default mapSidebar;
  </code></pre>
  
  <p>How to resolve this issue?</p>