Syntax Error. Unexpected token '=' in React

Question

When I try to run dev-server it returns an error in the console that I cannot identify what is generating it

webpack.config.js

iconst path = require('path');

module.exports = {
entry: './src/app.js',
output: {
    path: path.join(__dirname,'public'),
    filename: 'bundle.js'
},
module: {
    rules: [{
        loader: 'babel-loader',
        test: /\.js$/,
        exclude: /node_modules/,
        query: {
            presets: ['es2015', 'react']
        }
    },]
},
devtool: 'cheap-module-evel-source-map',
devServer: {
    contentBase:path.join(__dirname,'public'),
    historyApiFallback: true
}
};

File that of error

import React from 'react';

class FormCadastroUser extends React.Component {
constructor(props){
    super(props);

    this.onEmailChange = this.onEmailChange.bind(this);
    this.onNameChange = this.onNameChange.bind(this);
    this.onLastNameChange = this.onLastNameChange.bind(this);
    this.onPasswordChange = this.onPasswordChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.state={
        name: '',
        lastname: '',
        email: '',
        password: ''
    }
}
onNameChange = (e) => {
    const name = e.target.value;
    this.setState(() => ({name}));
} 
onLastNameChange = (e) => {
    const lastname = e.target.value;
    this.setState(() => ({lastname}));
} 
onEmailChange = (e) => {
    const email = e.target.value;
    this.setState(() => ({email}));
} 
onPasswordChange = (e) => {
    const password = e.target.value;
    this.setState(() => ({password}));
} 
onSubmit = (e) => {
    e.preventDefaut();
    this.props.onSubmit({
        name: this.state.name,
        lastname: this.state.lastname,
        email: this.state.email,
        password: this.state.password
    });
}

render(){
    return (
        <div className= 'container'>
            <form onSubmit={this.onSubmit}>
                <div className="form-row">
                    <div className="col">
                        <input type="text" className="form-control" placeholder="First name" autoFocus value={this.state.name} onChange={this.onNameChange} />
                    </div>
                    <div className="col">
                        <input type="text" className="form-control" placeholder="Last name" value={this.state.lastname} onChange={this.onLastNameChange}/>
                    </div>
                    <div className="col">
                    <input type="Email"    className="form-control" placeholder="Email" value={this.state.email} onChange={this.onEmailChange}/>
                    </div>
                    <div className="col">
                    <input type="text" className="form-control" placeholder="Password" value={this.state.password} onChange={this.onPasswordChange}/>
                    </div>
                </div>
                <div style={{paddingTop: '10px'}}>
                <button type="submit" className="btn btn-primary">Sign in</button>
                </div>
            </form>
        </div>
    );

}
}
export default FormCadastroUser;

The error accuses in

onNameChange = (e) => { | ^

on the sign of Equals.

Answer 1

Changes these methods of onNameChange = (e) => { for onNameChange(e) {.

For two reasons:

• arrow functions do not allow .bind to another context. That is: const a = () => console.log(this); a.bind('foo')(); will give window, or is your idea of .bind in the constructor is without effect

• class properties need more Babel packages to configure and apparently this is not configured, otherwise it would not give error.