Passing data from one component to another in react

Question

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

Here is the first component:

const JobOffer = React.createClass({
  mixins: [Navigation],

  getInitialState: function() {
    console.log(this.props.data);
    return {
        listing: this.props.data
    };
  },

  componentDidMount: function() {
    AppStore.addChangeListener(this._onChange);
  },

  componentWillUnmount: function() {
    AppStore.removeChangeListener(this._onChange);
  },

    _onChange : function(){

    },


  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 (
        <div>
          <a onClick={this.handleClick.bind(this)}>
              <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>
        </div>
      );
    },

});


module.exports = JobOffer;

As you can see the component above transitionTo the route I want but how do I pass the this.listings data when handleClick is invoked?

Here is the component I am trying to pass it to:

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');


// Our custom component is managing whether the Modal is visible
const ListingDetail = React.createClass({
  mixins: [Navigation],

  getInitialState: function() {
    console.log(this.props.data);
    return {
        listing: this.props.data
    };
  },

  componentDidMount: function() {
    AppStore.addChangeListener(this._onChange.bind(this));
  },


  _onChange : function(){

  },


  handleClick: function () {
    this.transitionTo('/listing/apply/' + this.state.listing.id );
  },


  render: function () {
        var data = this.state.listing;
        var employmentType = 'test';
        return (
                <div>
                    <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>
         );
      },

});


module.exports = ListingDetail;

Answer 1

React per se doesn't provide a way to share data between components unless they're in the same component hierarchy. Only ancestor-to-descendent passing is provided by React directly, by passing data from parent components to child components via "props". You can also indirectly share data from a child to a parent by passing a callback (a method defined in the parent) as a prop to the child and then having the child component invoke that callback when something changes and passing data as arguments. Read more about rendering multiple components and data sharing here .

If your components are being rendered in completely separate routes, like it seems you're trying to do, then you will have to provide the data flow in some other way. React in itself doesn't provide that, but Flux is one approach that the developers at Facebook are behind that is explicitly about handling data flow, and which caters really well to React.

Answer 2

This type of problem is exactly why Flux was devised. Instead of trying to pass data directly from one component to another, let a store hold that data. Then, when you transition to another component, that component can read the data from the store.