Re-Rendering of ReactiveList Results

Question

I am trying to build a Search-Engine using reactivesearch library. Does anybody know how i can trigger a re-rendering of the ReactiveList Results? (eg with a button onClick event?)

Answer 1

If you have a class component, please try below code

this.forceUpdate();

Answer 2

Unfortunately i can not provide my full code here. But i will try to explain what my problem is. Within my main App component i do have ReactiveBase, a DataSearch and ReactiveList as well as several buttons:

const App = () => (
  <ReactiveBase
   app="Test"
   credentials="null"
   url="http://localhost:9200"
   analytics={false}
   searchStateHeader
   >
   <DataSearch />
   <ReactiveList
   componentId="result"
   dataField="_score"
   renderItem={renderItem}
   >
<div><Switch defaultChecked onChange={onSpeciesChange} style={{ marginRight: '5px', background: "brown" }} id="cellines"/> <label> Celline </label></div>
<div><Switch defaultChecked onChange={onSpeciesChange} style={{ marginRight: '5px', background: "blue" }} id="chemicals"/> <label> Chemicals </label></div>

So the buttons get rendered within my main App component and i do have a function onSpeciesChange, which basically updates a global object called entityswitchstatus with boolean values:

function onSpeciesChange(checked,event) {
  if (event.target.id === "cellines") { entityswitchstatus.cellines=checked; }
  else if (event.target.id === "chemicals") { entityswitchstatus.chemicals=checked; }
  else if (event.target.id === "diseases") { entityswitchstatus.diseases=checked; }
  else if (event.target.id === "genes") { entityswitchstatus.genes=checked; }
  else if (event.target.id === "mutations") { entityswitchstatus.mutations=checked;}
  else if (event.target.id === "species") { entityswitchstatus.species=checked; }
  console.log(entityswitchstatus);
}

Within the renderItem function of the ReactiveList component i am processing the responses from Elasticsearch. And if there is a certain field and the global entityswitchstatus is true i do a highlighting of another field of the elasticsearch response. That all happens within renderItem function of ReactiveList.

function renderItem(res) {
if (res.ptc_species && entityswitchstatus.species) { var species_classname = createHighlighClassObject(res.ptc_species,"species"); } else { res.ptc_species = [] }
}

And basically by clicking the buttons i can change the global object entityswitchstatus of course. But this does not lead to a re-rendering of the ReactiveList component which is also expected. I can not pass any additional props to renderItem or at least i don't know how. So my idea was to simply call re-rendering of ReactiveList component by also clicking the button within the main App component.

Hope this is not too confusing.