React-toolbox: 'Missing class properties transform' in Meteor

[pixelpunch]

The react-toolbox-example works fine on Meteor. But I am repeatedly getting Missing class properties transform. on my console whenever I try to use any of the other react-toolbox components, except 'Avatar' which works fine. I tried adding presets to the .babelrc file and other things suggested here, but none work. Can someone please help explain this? The following works fine in the playground but gives error on local dev environment.

import React from 'react';
import ReactDOM from 'react-dom';
import Input from 'react-toolbox/lib/input';

export default class InputTest extends React.Component{

        state = { name: '', phone: '', email: '', hint: '' };

        handleChange = (name, value) => {
        this.setState({...this.state, [name]: value});
        };


        render() {
          return (
              <section>
                <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16 } />
                <Input type='text' label='Disabled field' disabled />
                <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
                <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
                <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon={<span>J</span>} />
             </section>
          )
        }
}; `

[newswim]

So.. this has to do with some class transforms being invalid.. however using this.state within the class constructor has resolved this issue for me. I'll rework your code with this in mind . .

import React from 'react';
import Input from 'react-toolbox/lib/input';

export default class InputTest extends React.Component {
    constructor() {
        super()
        this.state = {
            name: '', 
            phone: '', 
            email: '', 
            hint: ''
        }
        this._handleChange = this._handleChange.bind(this)
    }

    _handleChange(name, value) {
        this.setState({...this.state, [name]: value})
    }

    render() {
        return (
            <section>
                <Input type='text' label='Name' name='name' value={this.state.name} onChange={this._handleChange('name', event)} maxLength={16 } />
                <Input type='text' label='Disabled field' disabled />
                <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this._handleChange('email', event)} />
                <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this._handleChange('phone', event)} />
                <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this._handleChange('hint', event)} icon={<span>J</span>} />
           </section>
        )
    }
}

I didn't test, but that should work. I also made these changes:

• add _ prefix to handler
• bind handler to this within the constructor

Hope this helps.

[pixelpunch]

Hi newswim,

Now it works.
Thanks for pointing out the issues with my code. Not using the constructor class and private object property was throwing that error. But because the error said 'class transforms..' I thought it has something to do with Babel and transpiling. Thanks again. I am wiser now :)

[rwaness]

you can also see the babel plugin : transform-class-properties

https://babeljs.io/docs/plugins/transform-class-properties/

[drgorb]

I got this error when defining class functions as constants like so:

const _handleChange = () => {
    ...
}

when changing this syntax to

_handleChange() {
    ...
}

the error disappears