React JS - Render one Component in another

Question

I'm brand new to React so pardon my sloppiness here. I have two asynchronous calls to api's and I am trying to display the returned data from one component inside another.

Here is the first component with an async call to an api:

      var Program = React.createClass({
      getInitialState: function(){
          return{
              data: []
          };
      },
      componentDidMount(){
          this.getDataFromServer('https://api.myjson.com/bins/5bdb3');
      },
      displayResponse: function(response) {
        this.setState({
          data: response
        })
      },
      getDataFromServer: function(url){
          $.ajax({
              type: 'GET',
              dataType: 'json',
              url: url,
              success: function(response, i) {
                this.displayResponse(response)
              }.bind(this)
          });
      },
      render: function() {
        var size = 3; // only show top 3 results
        var list = this.state.data;
        var result = list.slice(0, size).map(function(result, i) {
          return <ProgramItem key={ i } course={ result } index={ i } />
        });
        return (
          <div>{ result }</div>
        );
      }
  });

  var ProgramItem = React.createClass({
    render: function() {
      var course = this.props.course;
      return (
        <div className="charts-block">
          <div className="top-section">
            <div className="charts-block-title">
              <p className="title">{ course.Name }</p>
              <button className="edit-ico"><i className="fa fa-pencil"></i></button>
            </div>
            <p>Sales by month</p>
            <div className="charts">
              <img src="images/graph.png" alt="Stats Chart" />
            </div>
          </div>
          <div className="stats-list-wrapper parent-show-more">
            <table className="stats-table header">
              <tr>
                <th colSpan={ 2 } style={{ textAlign: 'right' }}>Current</th>
                <th>1 - Year</th>
              </tr>
              <tr>
                <td>Total Monlthy Sales</td>
                <td className="monthly-sales">{ course.TotalMonthlySales }</td>
                <td><img src="images/spark_line.png" alt="Stats Spark Line" /></td>
              </tr>
            </table>
            <div className="show-more-table">
              <div className="stats-table plans-table">
                <div>
                  <div>Price Name</div>
                  <div>Current</div>
                  <div>1 - Year</div>
                </div>
                <div className="planInfo">-- Data From other Component here --</div>
              </div>
            </div>
            <div className="click-more-row">
              <span>more</span>
            </div>
          </div>
        </div>
      );
    }
  });

and inside of <div class="planIfno"> I am wanting to "inject" the data from this second component here:

      var Plan = React.createClass({
      getInitialState: function(){
          return{
              data: []
          };
      },
      componentDidMount(){
          this.getDataFromServer('https://api.myjson.com/bins/47axv');
      },
      displayResponse: function(response) {
        this.setState({
          data: response
        })
      },
      getDataFromServer: function(url){
          $.ajax({
              type: 'GET',
              dataType: 'json',
              url: url,
              success: function(response, i) {
                this.displayResponse(response)
              }.bind(this)
          });
      },
      render: function() {
        var size = 7; // only show top 3 results
        var list = this.state.data;
        var result = list.slice(0, size).map(function(result, i) {
          return <PlanItem key={ i } plan={ result } index={ i } />
        });
        return (
          <div>{ result }</div>
        );
      }
    });

    var PlanItem = React.createClass({
      render: function() {
        var plan = this.props.plan;
        return (
          <tr>
            <td>{ plan.Name }</td>
            <td>{ plan.Sales }</td>
            <td></td>
          </tr>
        );
      }
    });

Any direction would be much appriciated!

Answer 1

It's kind of hard to understand what you're looking for, and there is such a thing as too much code... took me a while to even find where planIfno [sic] was

I think what you're looking for is given var Plan = React.createClass(...) you can use it in other parts of your code like <Plan plan={{Name: "something", Sales: 10 }}/>.

Each component will handle whatever asynchronous code they may/may not have independently.

It would end up looking like

<div className="planInfo">
  {/* hardcoded plan, but you could just as easily pass in `plan={plan}` */}
  <Plan plan={{Name: "something", Sales: 10 }}/> 
</div>

Answer 2

Just put <Plan /> there.