ReferenceError: className is not defined

Question

In my rails app that is using reactjs I have coffescript code that looks like this:

DOM = React.DOM

CreateNewMeetupForm = React.createClass
  getInitialState: ->
    {
      title: ''
      description: ''
    }

  titleChanged: (event) ->
    @setState(title: event.target.value)

  descriptionChanged: (event) ->
    @setState(description: event.target.value)

  render : ->
    DOM.form
      className: 'form-horizontal'
      DOM.fieldset null,
        DOM.legend null, "New Meetup"

        DOM.div
          className: 'form-group'
          DOM.label
            htmlFor: 'title'
            className: 'col-lg-2 control-label'
            'Title'

          DOM.div
            className: 'col-lg-10'
            DOM.input
              className 'form-control'
              placeholder: 'Meetup title'
              id: 'title'
              type: 'text'
              value: @state.title
              onChange: @titleChanged

        DOM.div
          className: 'form-group'
          DOM.label
            htmlFor: "title"
            className 'col-lg-2 control-label'
            'Description'
          DOM.div
            className "col-lg-10"
            DOM.input
              className 'form-control'
              placeholder: 'Meetup description'
              id: 'description'
              type: 'text'
              value: @state.description
              onChanage: @descriptionChanged

CreateNewMeetupForm = React.createFactory(CreateNewMeetupForm)

$ ->
  React.render(
    CreateNewMeetupForm(),
    document.body
  )

It returns me following error:

ReferenceError: className is not defined

How can I fix that?

Answer 1

In three instances within your last block of code, you use the label className without a colon:

className 'col-lg-2 control-label'

className "col-lg-10"

className 'form-control'

The rest of your code uses className: