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...
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.
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'