React syntax error when adding class properties

Question

I\'m writing a react app with babel and webpack. It\'s been going along well until I tried to add a property on a class - specifically trying to use a Dropdown from React-To

Answer 1

You can write your component like this

class ChordFilters extends Component {

  constructor() {
    super();
    this.state = {
       value: 'Mandolin',
    };

  handleChange = (value) => {
    this.setState({value: value});
  };

The state is a class instance variable. You should be using constructors for initializing such variables. Otherwise you have to use

{
  "plugins": ["syntax-class-properties"]
}

in the .babelrc file to let babel know about properties.

Answer 2

I would make sure you have babel set up right. You're probably missing the plugin for class properties, which is an experimental feature.

.babelrc

{
  "presets": ["react", "es2015"],
  "plugins": ["transform-class-properties"]
}

You can get the plugin via npm: npm i -D babel-plugin-transform-class-properties