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? (e.g. with a button onClick event?)

Can you share your code for better understanding? – Rajan Apr 11 '20 at 19:59 — Rajan, Apr 11 '20 at 19:59

score 0 · Answer 1 · answered Apr 11 '20 at 17:08

0

If you have a class component, please try below code

this.forceUpdate();

answered Apr 11 '20 at 17:08

Rajan

1,512
2
14
18

Unfortunately ReactiveList does not provide forceUpdate: https://opensource.appbase.io/reactive-manual/result-components/reactivelist.html – crab Apr 11 '20 at 18:53

score 0 · Answer 2 · answered Apr 14 '20 at 19:22

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.

Hey @crab it will be really great if you can share a Codesandbox link, you can use the example from docs to do so. Here is the docs link: https://docs.appbase.io/docs/reactivesearch/v3/overview/quickstart/ — Yash Joshi, Apr 15 '20 at 07:25

Re-Rendering of ReactiveList Results

2 Answers2