I have declared a arrow function inside react ponent. inside this i have logged a value but it shows error. I am new in react so please help me out.

Where I have declared the function

class DeliveryPage extends Component{
   onChange : (event) => { console.log('change', event.target.value); }
}

I have invoked the function here

  <ComboBox
    data={source}
    onChange={this.onChange}
    onFilterChange={this.onFilterChange}
    filterable={true}
  />

Then i have changed my code to

    onChange = (event) => { console.log('change', event.target.value); }

I have declared a arrow function inside react ponent. inside this i have logged a value but it shows error. I am new in react so please help me out.

Where I have declared the function

class DeliveryPage extends Component{
   onChange : (event) => { console.log('change', event.target.value); }
}

I have invoked the function here

  <ComboBox
    data={source}
    onChange={this.onChange}
    onFilterChange={this.onFilterChange}
    filterable={true}
  />

Then i have changed my code to

    onChange = (event) => { console.log('change', event.target.value); }

• javascript
• reactjs
• arrow-functions

2 Answers 2

onChange : (event) => { console.log('change', event.target.value); }

This is incorrect syntax, it should be:

onChange = (event) => { console.log('change', event.target.value); }

If the Arrow Functions don't work, then you most likely don't have the proposal-class-properties functionally, which can be installed via the following Babel Plugin: https://babeljs.io/docs/en/babel-plugin-proposal-class-properties.

Otherwise, try this method similar to this:

class DeliveryPage extends Component{
  constructor(props) {
    super(props);

    this.onChange = this.onChange.bind(this);
  }

  onChange(event) {
    console.log('change', event.target.value);
  }
}

You should be trying this

class DeliveryPage extends Component{
   onChange = (event) => {
     console.log('change', event.target.value);
  }
}