ReactJS How to transfer data between pages?

Question

I'm still new to React.

I was wondering, how do I transfer data from let's say "Main Page" to another page to display the results?

I think it has something to do with props? But I'm not entirely sure.

My MainPage has input/select tags that takes in name, value, selections from user and dates.

I want to be able to grab all those information and output it in another page called "DisplayResults" and maybe use the data for other things, maybe create a table with the information.

Thanks very much for your help!

This is my app.jsx

var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');
var MainPage = require('MainPage');
var About = require('About');
// Load foundation
require('style!css!foundation-sites/dist/foundation.min.css')
$(document).foundation();
ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={Main}>
      <Route path="about" component={About}/>
      <IndexRoute component={MainPage}/>
    </Route>
  </Router>,
  document.getElementById('app')
);

Answer 1

There are a few different ways... Good option would be to use some state management layer like Redux or MobX

A simple one is to have your Main component save those data in its state and pass it to the other pages as props. Since you're using react-router you'll need to clone the this.props.children in your Main component to add the additional props like the data and the function that sets the data.

Your Main component would probably look something like

class Main extends Component {
   constructor(props) {
      this.state = {
         data: 'some default data',
      }
   }

   updateData(data) {
      this.setState({ data });
   }

   render() {
     return <div>
        <Header />
        {React.cloneElement(this.props.children, { data: this.state.data, setData: this.updateData })}
     </div>
   }
}

class MainPage extends Component {

   render() {
      return <div>
         <input type="text" onChange={e => this.props.setData({ field: e.target.value })} />
         <Link to="/DisplayResults">Go to Results</Link>
      </div>
   }
}

class DisplayResults extends Component {
   render() {
       return <div>
         {this.props.data.field}
       </div>
   }
}

Answer 2

Technically React creates a single page application, therefore there is no other page to pass data to.

However, I believe you might be talking about passing data into components. I always structure my React applications into container and component folders. The container folder is where all the logic components are located, and the component folder is where all the UI components are located.

One of the things that makes React so intuitive is that you can easily pass data from parent components to children components via props. In other words, my logic components pass data to the UI components via props.

For example suppose I want my logic component called Dashboard to pass organization data to my UI component MyChildComponent, I would do something like this:

containers/DashBoard/index.js

export class DashBoard extends React.Component { // eslint-disable-line react/prefer-stateless-function

  constructor(props) {
    super(props);
    this.state = {
      organizations: null,
    };
    this.rowCallback = this.rowCallback.bind(this);
  }

  render() {
    <MyChildComponent orgs={this.state.organizations} />
  }
}

components/MyChildComponent/index.js

export class MyChildComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render(){
    <div>
      {this.props.orgs}
    </div>
  }
}

This is just one way to handle passing in data. You could also pass in values while routing between logic components, or use a flux library like redux to create state variables, etc..

Please note that my code excerpts make use of es6, and needs a babel compiler. I also prefer using functions for UI components when possible as I believe that is the React Way