Reactive data for React

Hi,

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

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

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>

Function:

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(),
  };
})(CountBadge);
2 Likes

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

1 Like