React : Render returns createElement

Question

I just started to learn React and I'm using it with a Rails backend.

In my view I have :

<%= react_component 'Products', { data: @products } %>

It works fine with this static code :

var Products = React.createClass({
  getInitialState: function () {
    return {products: this.props.data};
  },

  getDefaultProps: function() {
    return {products: []};
  },

  render: function () {
    return (
      <div className="products">

        <h2 className="title">List of products</h2>

        <table className="table table-bordered">
          <thead>
            <tr>
              <th>Name</th>
              <th>Company</th>
              <th>RRP</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>AAA</td>
              <td>BBB</td>
              <td>CCC</td>
            </tr>
          </tbody>
        </table>

      </div>
    );
  }
});

I've got my table displayed well. The next step is to have the same result but with each line representing a new product's element. So I start to create a new React Class in the same file :

var ProductLine = React.createClass({
  render: function () {
    return (
      <tr>
        <td>AAA</td>
        <td>BBB</td>
        <td>CCC</td>
      </tr>
    );
  }
});

My problem is, how can I render this ProductLine in my table ? Because if I do this :

<tbody>
  React.createElement ProductLine
</tbody>

The line is considered as plain text and not rendered...

Answer 1

Actually I found the solution just after posting this question.

This post called Thinking in React from Pete Hunt is very useful, especially for a React newbie. Also, the example is almost the same as my situation...

var ProductRow = React.createClass({
  render: function () {
    return (
      <tr>
        <td>{this.props.product.name}</td>
        <td>{this.props.product.company_id}</td>
        <td>{this.props.product.price}</td>
      </tr>
    );
  }
});


var ProductTable = React.createClass({
  render: function () {
    var rows = [];

    this.props.data.forEach(function(product) {
      rows.push(<ProductRow product={product} key={product.id} />);
    });

    return (
      <div className="products">

        <h2 className="title">List of products</h2>

        <table className="table table-bordered">
          <thead>
            <tr>
              <th>Name</th>
              <th>Company</th>
              <th>RRP</th>
            </tr>
          </thead>
          <tbody>
            {rows}
          </tbody>
        </table>

      </div>
    );
  }
});

Answer 2

I could be wrong but <ProductLine /> is how you would instantiate a component within the render function of another parent component ie:

<tbody>
  <ProductLine />
</tbody>