Joining arrays in react render function - reactjs

Question

In a json feed (below) I have two arrays, "rent" and "buy" I wish to join and display in an html table but I'm not sure where to do it.
The feed looks like this...
"store": {
"rent": [
{ "title": "Lord of the ring masters", "cost": 2.99 }
],
"buy": [
{ "title": "Fast and Furious 14", "cost": 5.99 },
{ "title": "Shogun Assassin", "cost": 2.99 }
],
"total": 30.20
}
And the render function in my view, which will display one of the above correctly looks like this
render: function(){
var createRow = function(rowItem, i){
return (
<tr key={i}>
<td>{rowItem.name}</td>
<td>{rowItem.cost}</td>
</tr>
);
};
return (
<div>
<h1>Package</h1>
<table className="table">
<thead>
<th>Package</th>
<th>Name</th>
<th>Cost</th>
</thead>
<tbody>
{this.props.packageList.rent.map(createRow, this)}
</tbody>
</table>
Total: {this.props.packageList.total}
</div>
);
}
Could any one tell me how I would alter the above to join the arrays and present the data like this...
**Rent** Lord of the ring masters £2.99
**Buy** Fast and Furious 14 £5.99
**Buy** Shogun Assassin £2.99

Answer 1

Rather than having your map function called within the render, create another method on your object that returns an array of rows. So your new component looks like:
var myClass = React.createClass({
renderRows: function() {
var rows = [];
this.props.packageList.rent.forEach(function(rowItem, i) {
rows.push(
<tr key={i}>
<td>rent</td>
<td>{rowItem.name}</td>
<td>{rowItem.cost}</td>
</tr>
);
});
this.props.packageList.buy.forEach(function(rowItem, i) {
rows.push(
<tr key={i}>
<td>buy</td>
<td>{rowItem.name}</td>
<td>{rowItem.cost}</td>
</tr>
);
});
return rows;
},
render: function(){
return (
<div>
<h1>Package</h1>
<table className="table">
<thead>
<th>Package</th>
<th>Name</th>
<th>Cost</th>
</thead>
<tbody>
{this.renderRows()}
</tbody>
</table>
Total: {this.props.packageList.total}
</div>
);
}
})
Alternatively, you could combine the data ahead of time and just do one loop over the entire thing. Finally, you probably don't want to define new function in your render function, rather, as I suggested, create a new method on the component. Also, I haven't tested the above, so be sure to check for errors.