javascript - Getting undefined for this.props.data -

i keep getting undefined this.props.data when have passed setting this.state this.props.data last component.

here joboffer component passes data , render:

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 (         <a onclick={this.handleclick}>             <img style={{width: 50+'px', height: 50+'px'}} src="images/job1.jpg" alt="" classname="img-circle" />             <div classname="title">                 <h5>{data.job_title}</h5>                 <p>{data.business.business_name}</p>             </div>             <div classname="data">                 <div ><i>posted 1 day ago</i></div>                 <div classname="city"><i classname="fa fa-map-marker"></i>{data.business.business_city}</div>                 <div classname="type full-time"><i classname="fa fa-clock-o"></i>{employmenttype}</div>                 <div classname="sallary"><i classname="fa fa-dollar"></i>{data.job_compensation}</div>             </div>         </a>        );     },  });   module.exports = joboffer; 

you can see passing listingdetail when _onchange. here jobdetails component is giving undefined error.

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 managing whether modal 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 (             <img style={{width: 200+'px', height: 200+'px'}} src="images/job1.jpg" alt="" classname="img-circle" />             <div classname="title">                 <h5>{data.job_title}</h5>                 <p>{data.business.business_name}</p>             </div>                 <div classname="city"><i classname="fa fa-map-marker"></i>{data.business.business_city}</div>                 <div classname="type full-time"><i classname="fa fa-clock-o"></i>{employmenttype}</div>                 <div classname="sallary"><i classname="fa fa-dollar"></i>{data.job_compensation}</div>              <div classname="container">               <div classname="row">                 <div classname="col-sm-8">                   <h3></h3>                    <article>                     <h2>job details</h2>                     <p>{data.job_description}</p>                    </article>                 </div>        );     },  });   module.exports = listingdetail; 

any idea?

i don't see neither joboffer nor listingdetail being rendered anywhere. component going render which?

the this.props property of component going contain properties passed component @ point rendered (or rather "mounted", in react's component lifecycle terminology). it's not meant mutated during component's lifespan, can view them "initialization" values. this.state property of component on other hand should contain properties change throughout component's lifecycle, , each time change using this.setstate() component re-rendered (unless prevent re-render in this.shouldcomponentupdate method) reflect new state.

so, this.props contains values passed "attributes" when mounting component. if use jsx this:

var parent = react.createclass({     render: function() {         return <detailslisting id={123} job_title="react dev" />;     } }); 

in case, detailslisting's this.props.id 123 , this.props.job_title "react dev" expected.

you seem confuse difference between state , props returning props initial state. props should props , state should state, not intermixed (this might opinionated, think it's mandated react principles). either way, this.props contain values passed when rendering/mounting.