SyntaxError: [stdin]:24:11: unexpected . React-Rails

750 Views Asked by At

I'm trying to make form with react-rails gem. But I receive an error:

SyntaxError: [stdin]:24:11: unexpected .

By trial I've found, that problem is in first React.DOM.div line (it's marked in code), but I don't understand, why it's happened, I've checked everything one hundred times :)

components/country_form.coffee:

@CountryForm = React.createClass
    getInitialState: ->
        name: ''

    valid: ->
        @state.name

    handleChange: (e) ->
        name = e.target.name
        @setState "#{name}": e.target.value

    handleSubmit: (e) ->
        e.preventDefault()
        $.post '', { country: @state }, (data) =>
            @props.handleNewCountry data
            @setState @getInitialState()
        , 'JSON'

    render: ->
        React.DOM.form
            onSubmit: @handleSubmit
            React.DOM.div # Problem is here
                className: 'form-group'
                    React.DOM.label
                        'Name'
                    React.DOM.input
                        type: 'text'
                        className: 'form-control'
                        name: 'name'
                        value: @state.name
                        onChange: @handleChange
            React.DOM.div
                className: 'form-group'
                    React.DOM.button
                        type: 'submit'
                        className: 'btn btn-primary'
                        disabled: !@valid()
                        'Save'

Thanks for any help!

2

There are 2 best solutions below

0
On BEST ANSWER

I've found the problem. RubyMine (and I think IntelliJ IDEA too) indent CoffeeScript files with spaces. Just change indentations to tabs, and error will disappear.

IntelliJ IDEA settings (CoffeeScript indentions)

1
On

I think it should be indented once more.

Right now it's even with the prop of onSubmit:

    React.DOM.form
        onSubmit: @handleSubmit
        React.DOM.div # Problem is here
            className: 'form-group'

but maybe it should be incremented once more:

    React.DOM.form
        onSubmit: @handleSubmit
        # -> 
            React.DOM.div # Problem is here
                className: 'form-group'