Reactive data for React


I’m currently subscribing to Mongo like this for my React component:

export default withTracker(() => {
  const subscription = Meteor.subscribe('documents');
  return {
    loading: !subscription.ready(),
    documents: DocumentsCollection.find().fetch(),

Then inside render I call a function:

<Link className="btn btn-primary" to={`${match.url}/${_id}/quotes`}>Quotes <span className="badge badge-light">{getCountOfQuotes(_id)}</span></Link>


const getCountOfQuotes = (rfqID) => {
  const count = QuotesCollection.find({ rfqID: rfqID }).count()
  return count

But this count number is only updated once, when component is rendered. When number of quotes changes in Quotes collection I don’t get new number pushed to UI.

How can I make this kind of function reactive?

I need to search for specific ID so I cannot subscribe within withTracker()

Anybody has idea?

Make the badge into a different component wrapped with its own withTracker

const CountBadge = ({ count }) => <span className="badge badge-light">{count}</span>;

export default withTracker(({ rfqID }) => {
  return {
    count: QuotesCollection.find({ rfqID }).count(),

Thank you, exactly what I needed! Amazing, I couldn’t figure it out and started to doubt in Meteor but its fantastic!

1 Like