{"action":"created","issue":{"url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/969","labels_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/969/labels{/name}","comments_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/969/comments","events_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/969/events","html_url":"https://github.com/react-bootstrap/react-bootstrap/issues/969","id":94202784,"number":969,"title":"Trying to pass this.props from one component to another","user":{"login":"rahul1346","id":9812910,"avatar_url":"https://avatars.githubusercontent.com/u/9812910?v=3","gravatar_id":"","url":"https://api.github.com/users/rahul1346","html_url":"https://github.com/rahul1346","followers_url":"https://api.github.com/users/rahul1346/followers","following_url":"https://api.github.com/users/rahul1346/following{/other_user}","gists_url":"https://api.github.com/users/rahul1346/gists{/gist_id}","starred_url":"https://api.github.com/users/rahul1346/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/rahul1346/subscriptions","organizations_url":"https://api.github.com/users/rahul1346/orgs","repos_url":"https://api.github.com/users/rahul1346/repos","events_url":"https://api.github.com/users/rahul1346/events{/privacy}","received_events_url":"https://api.github.com/users/rahul1346/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":3,"created_at":"2015-07-10T03:15:49Z","updated_at":"2015-07-10T11:43:18Z","closed_at":"2015-07-10T11:43:18Z","body":"I have a component that I am trying to pass data to from a previous component when it is clicked. I have tried setState to change the state but nothing is working. How do I pass the data? The data is living in this.listing\r\n\r\nHere is the first component:\r\n\r\n```\r\nconst JobOffer = React.createClass({\r\n  mixins: [Navigation],\r\n\r\n  getInitialState: function() {\r\n    console.log(this.props.data);\r\n    return {\r\n        listing: this.props.data\r\n    };\r\n  },\r\n\r\n  componentDidMount: function() {\r\n    AppStore.addChangeListener(this._onChange);\r\n  },\r\n\r\n  componentWillUnmount: function() {\r\n    AppStore.removeChangeListener(this._onChange);\r\n  },\r\n\r\n    _onChange : function(){\r\n\r\n    },\r\n\r\n\r\n  handleClick: function () {\r\n\r\n    this.transitionTo('/listing/' + this.state.listing.id );\r\n\r\n  },\r\n\r\n\r\n  render: function () {\r\n      var data = this.state.listing;\r\n      var employmentType;\r\n      switch(data.employment_type) {\r\n        case 'F':\r\n            employmentType = 'Full Time';\r\n            break;\r\n        case 'P':\r\n            employmentType = 'Part Time';\r\n            break;\r\n        case 'H':\r\n            employmentType = 'Hourly';\r\n            break;\r\n        default:\r\n            employmentType = 'Unknown';\r\n      }\r\n      return (\r\n        <div>\r\n          <a onClick={this.handleClick.bind(this)}>\r\n              <img style={{width: 50+'px', height: 50+'px'}} src=\"/images/job1.jpg\" alt=\"\" className=\"img-circle\" />\r\n              <div className=\"title\">\r\n                  <h5>{data.job_title}</h5>\r\n                  <p>{data.Business.business_name}</p>\r\n              </div>\r\n              <div className=\"data\">\r\n                  <div ><i>Posted 1 Day Ago</i></div>\r\n                  <div className=\"city\"><i className=\"fa fa-map-marker\"></i>{data.Business.business_city}</div>\r\n                  <div className=\"type full-time\"><i className=\"fa fa-clock-o\"></i>{employmentType}</div>\r\n                  <div className=\"sallary\"><i className=\"fa fa-dollar\"></i>{data.job_compensation}</div>\r\n              </div>\r\n          </a>\r\n        </div>\r\n      );\r\n    },\r\n\r\n});\r\n\r\n\r\nmodule.exports = JobOffer;\r\n```\r\n\r\nAs you can see the component above transitionTo the route I want but how do I pass the this.listings data when handleClick is invoked?\r\n\r\nHere is the component I am trying to pass it to:\r\n\r\n```\r\nvar React = require('react');\r\nvar ReactBootstrap = require('react-bootstrap');\r\nvar Button = ReactBootstrap.Button;\r\nvar Modal = ReactBootstrap.Modal;\r\nvar AppActions = require('../actions/app-actions');\r\nvar AppStore = require('../stores/app-store');\r\nvar Navigation = require('react-router').Navigation;\r\nvar _ = require('lodash');\r\n\r\n\r\n// Our custom component is managing whether the Modal is visible\r\nconst ListingDetail = React.createClass({\r\n  mixins: [Navigation],\r\n\r\n  getInitialState: function() {\r\n    console.log(this.props.data);\r\n    return {\r\n        listing: this.props.data\r\n    };\r\n  },\r\n\r\n  componentDidMount: function() {\r\n    AppStore.addChangeListener(this._onChange.bind(this));\r\n  },\r\n\r\n\r\n  _onChange : function(){\r\n\r\n  },\r\n\r\n\r\n  handleClick: function () {\r\n    this.transitionTo('/listing/apply/' + this.state.listing.id );\r\n  },\r\n\r\n\r\n  render: function () {\r\n        var data = this.state.listing;\r\n        var employmentType = 'test';\r\n        return (\r\n                <div>\r\n                    <img style={{width: 200+'px', height: 200+'px'}} src=\"/images/job1.jpg\" alt=\"\" className=\"img-circle\" />\r\n                    <div className=\"title\">\r\n                        <h5>{data.job_title}</h5>\r\n                        <p>{data.Business.business_name}</p>\r\n                    </div>\r\n                </div>\r\n         );\r\n      },\r\n\r\n});\r\n\r\n\r\nmodule.exports = ListingDetail;\r\n```"},"comment":{"url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/comments/120392835","html_url":"https://github.com/react-bootstrap/react-bootstrap/issues/969#issuecomment-120392835","issue_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/969","id":120392835,"user":{"login":"jquense","id":339286,"avatar_url":"https://avatars.githubusercontent.com/u/339286?v=3","gravatar_id":"","url":"https://api.github.com/users/jquense","html_url":"https://github.com/jquense","followers_url":"https://api.github.com/users/jquense/followers","following_url":"https://api.github.com/users/jquense/following{/other_user}","gists_url":"https://api.github.com/users/jquense/gists{/gist_id}","starred_url":"https://api.github.com/users/jquense/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jquense/subscriptions","organizations_url":"https://api.github.com/users/jquense/orgs","repos_url":"https://api.github.com/users/jquense/repos","events_url":"https://api.github.com/users/jquense/events{/privacy}","received_events_url":"https://api.github.com/users/jquense/received_events","type":"User","site_admin":false},"created_at":"2015-07-10T11:43:18Z","updated_at":"2015-07-10T11:43:18Z","body":"Since this does seem to be unrelated to react bootstrap I am going to close this out. you can check the guidelines her for what sorts of issues we address here. https://github.com/react-bootstrap/react-bootstrap/blob/master/CONTRIBUTING.md# issues thanks and hope you find the answer you need"}}