title: Getting undefined for this.props.data
body: <p>I keep getting undefined for this.props.data when I have passed it from by setting this.state this.props.data from last component.</p>
  
  <p>Here is the jobOffer component which properly passes data and render:</p>
  
  <pre><code>const JobOffer = React.createClass({
    mixins: [Navigation],
  
    getInitialState: function() {
      console.log(this.props.data);
      return {
          listing: this.props.data
      };
    },
  
    componentDidMount: function() {
      AppStore.addChangeListener(this._onChange);
    },
  
  
      _onChange : function(){
        this.setState({listingDetail:this.state.listing});
      },
  
  
    handleClick: function () {
      this.transitionTo('/listing/' + this.state.listing.id );
    },
  
  
    render: function () {
        var data = this.state.listing;
        var employmentType;
        switch(data.employment_type) {
          case 'F':
              employmentType = 'Full Time';
              break;
          case 'P':
              employmentType = 'Part Time';
              break;
          case 'H':
              employmentType = 'Hourly';
              break;
          default:
              employmentType = 'Unknown';
        }
        return (
          &lt;a onClick={this.handleClick}&gt;
              &lt;img style={{width: 50+'px', height: 50+'px'}} src="images/job1.jpg" alt="" className="img-circle" /&gt;
              &lt;div className="title"&gt;
                  &lt;h5&gt;{data.job_title}&lt;/h5&gt;
                  &lt;p&gt;{data.Business.business_name}&lt;/p&gt;
              &lt;/div&gt;
              &lt;div className="data"&gt;
                  &lt;div &gt;&lt;i&gt;Posted 1 Day Ago&lt;/i&gt;&lt;/div&gt;
                  &lt;div className="city"&gt;&lt;i className="fa fa-map-marker"&gt;&lt;/i&gt;{data.Business.business_city}&lt;/div&gt;
                  &lt;div className="type full-time"&gt;&lt;i className="fa fa-clock-o"&gt;&lt;/i&gt;{employmentType}&lt;/div&gt;
                  &lt;div className="sallary"&gt;&lt;i className="fa fa-dollar"&gt;&lt;/i&gt;{data.job_compensation}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/a&gt;
  
        );
      },
  
  });
  
  
  module.exports = JobOffer;
  </code></pre>
  
  <p>You can see that I am passing listingDetail when _onChange. Here is the jobDetails component that is is giving the undefined error.</p>
  
  <pre><code>var React = require('react');
  var ReactBootstrap = require('react-bootstrap');
  var Button = ReactBootstrap.Button;
  var Modal = ReactBootstrap.Modal;
  var AppActions = require('../actions/app-actions');
  var AppStore = require('../stores/app-store');
  var Navigation = require('react-router').Navigation;
  var _ = require('lodash');
  
  var JobOffer = require('./JobOffer');
  
  
  // Our custom component is managing whether the Modal is visible
  const ListingDetail = React.createClass({
    mixins: [Navigation],
  
    getInitialState: function() {
      console.log(this.props.data);
      return {
          ListingDetail: this.props.data
      };
    },
  
    componentDidMount: function() {
      AppStore.addChangeListener(this._onChange);
    },
  
  
    _onChange : function(){
  
    },
  
  
    handleClick: function () {
      this.transitionTo('/listing/apply/' + this.state.ListingDetail.id );
    },
  
  
    render: function () {
        var data = this.state.ListingDetail
  
        return (
              &lt;img style={{width: 200+'px', height: 200+'px'}} src="images/job1.jpg" alt="" className="img-circle" /&gt;
              &lt;div className="title"&gt;
                  &lt;h5&gt;{data.job_title}&lt;/h5&gt;
                  &lt;p&gt;{data.Business.business_name}&lt;/p&gt;
              &lt;/div&gt;
                  &lt;div className="city"&gt;&lt;i className="fa fa-map-marker"&gt;&lt;/i&gt;{data.Business.business_city}&lt;/div&gt;
                  &lt;div className="type full-time"&gt;&lt;i className="fa fa-clock-o"&gt;&lt;/i&gt;{employmentType}&lt;/div&gt;
                  &lt;div className="sallary"&gt;&lt;i className="fa fa-dollar"&gt;&lt;/i&gt;{data.job_compensation}&lt;/div&gt;
  
              &lt;div className="container"&gt;
                &lt;div className="row"&gt;
                  &lt;div className="col-sm-8"&gt;
                    &lt;h3&gt;&lt;/h3&gt;
  
                    &lt;article&gt;
                      &lt;h2&gt;Job Details&lt;/h2&gt;
                      &lt;p&gt;{data.job_description}&lt;/p&gt;
  
                    &lt;/article&gt;
                  &lt;/div&gt;
  
        );
      },
  
  });
  
  
  module.exports = ListingDetail;
  </code></pre>
  
  <p>Any idea?</p>