React not render div into li tag

Question

Cannot render this code, get SyntaxError: [stdin]:4:1: unexpected indentation

@Statement = React.createClass
  render: ->
    React.DOM.li
      React.DOM.div
        className: 'statement'
        @props.statement.body

If i comment out that line number 4, everything works fine.

Why it's happened? I can't understand anything...

Answer 1

The code won't compile as you are trying to pass a react element as the only argument to React.DOM.li, while it expects first an options object, then a child object.

@Statement = React.createClass
  render: ->
    React.DOM.li {},
      React.DOM.div
        className: 'statement'
        @props.statement.body

You need to pass the empty hash to the li element. You could pass null instead of {}, they will both be taken as an empty options / attr object by React.

Also, you can use the destructuring assignment from coffeescript to make the react code look cleaner:

{li, div} = React.DOM

@Statement = React.createClass
  render: ->
    li {},
      div
        className: 'statement'
        @props.statement.body

One of the few groups to work with coffeescript and React without JSX are Arkency, take a look at their resources for more tips.

---

Edit: regarding your comment:

It is probably a case of indentation - Coffeescript implicitly returns the last expression's result in a function or block.

If you wanted to render the second span nested in the first:

render: -> 
  React.DOM.span null, 
    '123' 
    React.DOM.span null, 
      'sdfdfg'

And if you were looking to render the two as siblings, you will need to wrap them up in a parent element as you can only return one component from React's render method:

render: -> 
  React.DOM.div null, 
    React.DOM.span null, 
       '123' 
    React.DOM.span null, 
      'sdfdfg'