reactivesearch: placing result count text on page

Question

I presume that putting <span id="rtxt"></span> in the DOM and then doing this

onResultStats={function (time_taken, total_results) { $('#rtxt').text('Found ' + total_results + ' products (' + time_taken + 'ms).'); return null; }}

in the ResultList is bad.

How is one supposed to put the results stats where one wants them?

(Would be nice to add some number formatting too.)

Answer 1

The best way to do this is store the time_taken and total_results in your component's state and then render them in any way you want. Note that onResultStats is actually a render prop and is used inside the render function internally which would cause an infinite loop if you do a setState without any checks. There is a proposal for a better API specs here. For now you could update your component's state after checking if the time_taken is different. Example:

onResultStats={(total, time) => {
  if (this.state.total !== total) {
    this.setState({ total, time })
  }
  return null;
}

Now that you have it in state you could render it in anyway that suits your needs.