I’m working on an React + Meteor app that should render a table of items, and for each item, the count of related items from another collection. I’m closely following the Meteor Guide and the todos reference app, and trying to adhere to Meteor + React best practices, but I can’t find a pattern to do this.
In my Items collection, I have the following helper:
numberOfRelateds() {
return Relateds.find({ itemId: this._id }).count();
}
Now I have a smart component ItemsPage that subscribes to both the Items and Relateds collections, fetches the items and passes them as an array to the props of a reusable component ItemTable that maps this array to individual ItemRows:
<tr>
<td>{item.name}</td>
<td>{item.numberOfRelateds()}</td>
</tr>
Now this works, but is obviously not reactive. What would be the best way to make it so? Obviously I could loop through the applications in ItemsPage code and attach the numbers of related items to them, but this seems hardly efficient. Another way would be to make ItemRow into a smart component, but I’m not sure about the efficiency of that either.