React/Meteor Component not passing Props properly

Question

new to Meteor and running into this issue. I am using Meteor 1.3.3

When I try to pass props from my parent Container to my React Component it keeps throwing an error I will post below.

Here is my React component Prospect.jsx:

import React from 'react'
import { createContainer } from 'meteor/react-meteor-data'
import { Residents } from '/collections/residents.jsx'

import ReactDOM from 'react-dom';
import RaisedButton from 'material-ui/RaisedButton';

// import '/collections/residents.jsx'

class Prospect extends React.Component {
  render() {
    return(
      <div>
        <h1>Prospect Resident - {this.props.prospect.name.first} </h1>
        <RaisedButton label="Default" />
      </div>
    )
  }
}

Prospect.propTypes = {
  // prospect: React.PropTypes.object
}

export default createContainer((params) => {
  const paramsId = params.params.prospectId
  Meteor.subscribe('residents');
  // Meteor.subscribe('resident');
  prospect =  Residents.find({_id: paramsId}).fetch()
  console.log(prospect[0])

  return {
    prospect: prospect
  }
}, Prospect)

and here is my Mongo collection

residents.jsx

import { Mongo } from 'meteor/mongo'

export const Residents = new Mongo.Collection('residents')

const nameSchema = new SimpleSchema({
  first: {type: String},
  last: {type: String}
})

const residentSchema = new SimpleSchema({
  cId:                { type: String },
  name:               { type: nameSchema },
  status:             { type: String },
})

Residents.attachSchema(residentSchema)



// METHODS
Meteor.methods({
  'residents.insert'(resident) {
    Residents.insert(resident)
  }
})



// PUBLICATIONS
if(Meteor.isServer) {
  Meteor.publish('residents', function() {
    return Residents.find()
  })

  Meteor.publish('resident', function(id) {
    return Residents.find({_id: id})
  })
}

and here is my Route

FlowRouter.route('/prospects/:prospectId}', {
  name: 'prospectShow',
  action(params) {
    mount(LoggedIn, { content:
      <MuiThemeProvider muiTheme={getMuiTheme()}>
        <Prospect params={{prospectId: params.prospectId}} />
      </MuiThemeProvider>
    })
  }

So when I go to localhost:3000 route I get the error

Prospect.jsx:14Uncaught TypeError: Cannot read property 'name' of undefined
Exception from Tracker recompute function:
debug.js:41 TypeError: Cannot read property '_currentElement' of null
at ReactCompositeComponentWrapper._updateRenderedComponent     (ReactCompositeComponent.js:772)
at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:753)
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:672)
at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:571)
at Object.receiveComponent (ReactReconciler.js:127)
at ReactCompositeComponentWrapper._updateRenderedComponent (ReactCompositeComponent.js:775)
at ReactCompositeComponentWrapper._performComponentUpdate (ReactCompositeComponent.js:753)
at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:672)
at ReactCompositeComponentWrapper.performUpdateIfNecessary (ReactCompositeComponent.js:585)
at Object.performUpdateIfNecessary (ReactReconciler.js:160)

My console.log(prospect[0]) in the container returns the object just fine, and it also works if I pass it in like this

return {
  prospect: {name: {first: 'Joe', last: 'Smith'}}
}

So it's something about the returned object I think. Any help would be greatly appreciated, thanks

Answer 1

I ended up going with a solution like this. If anyone wants to answer and explain why this is needed (I thought in meteor 1.3 this wasn't needed anymore) I will accept your answer.

import React from 'react'
import { createContainer } from 'meteor/react-meteor-data'
import { Residents } from '/collections/residents.jsx'


class Prospect extends React.Component {
  render() {
    if(!this.props.ready){return <span>Loading...</span>}
    const { prospect } = this.props
    return(
      <div>
        <h1>{prospect.name.first} {prospect.name.last}</h1>
        <div>Company: <b>{prospect.cId}</b></div>
      </div>
    )
  }
}

Prospect.propTypes = {
  ready: React.PropTypes.bool.isRequired,
  prospect: React.PropTypes.object.isRequired
}

export default createContainer((params) => {
  return {
    ready: Meteor.subscribe('resident', params.id).ready(),
    prospect: Residents.findOne(params.id)
  }
}, Prospect)