I'm going through this tutorial, and was fine until I changed the Records component and added React.createElement RecordForm, handleNewRecord: @addRecord
between two DOM renderings. Seems to interfere and prevent the DOM from rendering at all.
Here's the component:
@Records = React.createClass
getInitialState: ->
records: @props.data
getDefaultProps: ->
records: []
addRecord: (record) ->
records = @state.records.slice()
records.push record
@setState records: records
render: ->
React.DOM.div
className: 'records'
React.DOM.h2
className: 'title'
'Records'
React.createElement RecordForm, handleNewRecord: @addRecord
React.DOM.hr null
React.DOM.table
className: 'table table-bordered'
React.DOM.thead null,
React.DOM.tr null,
React.DOM.th null, 'Date'
React.DOM.th null, 'Title'
React.DOM.th null, 'Amount'
React.DOM.tbody null,
for record in @state.records
React.createElement Record, key: record.id, record: record
Console error says "Uncaught ReferenceError: RecordForm is not defined". Which, yes I do, and it's:
@RecordForm = React.createClass
bla bla bla bla
handleChange: (e) ->
name = e.target.name
@setState "#{ name }": e.target.value
handleSubmit: (e) ->
e.preventDefault()
$.post '', { record: @state }, (data) =>
@props.handleNewRecord data
@setState @getInitialState()
, 'JSON'
render: ->
React.DOM.form
bla bla bla bla
What gives?
Looks like I had an unintended space before handleChange. Adding newlines between each function solved it. >:/