ReactJS this.props.data is undefined

Question

I've got two classes, officerModals and OfficerPhoto , and officerModals is supposed to pass data into OfficerPhoto . However, when I try to log out the data in OfficerPhoto I just get an undefined . I've been following Reacts' tutorial and I have no idea where I could have gone wrong. Can anyone help?

reactReady = -> 
    officerModals = React.createClass
        getInitialState: ->
            {data: []}
        componentDidMount: ->            
            $.ajax
                url: this.props.url
                dataType: 'json'
                cache: false
                success:((data) ->
                    @setState data: data
                    # console.log data <- this logs the correct data
                    console.log @state.data.officers <- so does this
                ).bind(this)
        render: ->
            React.createElement 'div', { className: 'photos' }, React.createElement(OfficerPhoto, data: @state.data.officers)

    OfficerPhoto = React.createClass                  
        render: ->              
            React.createElement 'h1', {className: 'yes'}
        console.log 'test'                                      
        console.log @props #<- this returns undefined

    React.render React.createElement(officerModals, {url: "officers.json"}), $('#officerPics').get 0

$(document).ready reactReady
$(document).on 'page:load', reactReady

Edit: I stuck in a string right before I log @props and I uncommented @state.data.officers . It seems that OfficerPhoto is being rendered before officerModals - how would I fix that?

Answer 1

This looks like a race-condition. Your ajax query does not return before the render method runs, thus state.data.officers is undefined.

Answer 2

The problem is officeModals doesn't pass props on OfficerPhoto. Maybe using Object.assign will solve your propblem :

React.createElement(OfficerPhoto, Object.assign({}, this.props, { data: 'values' }));