How to display detail page from search results in ResultCard?

Question

Preconditions: React application using appbaseio/reactivesearch

Problem: I am trying to open a simple detail page in the same window (e.g. as a popup window triggered via onclick handler) when I click on a search result. Search results are being displayed by the ResultCard component. Anybody had a similar issue and solved it?

I see there is the url parameter (here: "profile") in the ResultCard component, but it just redirects to the specified url in another tab window.

import {ReactiveBase, DataSearch, ResultCard} from 
appbaseio/reactivesearch";

// ...some more code

<div className="container">
// connector to appbase.io
<ReactiveBase
  app="myapp"
  credentials="xxx"
  theme={{
    primaryColor: "#ffe067"
  }}
>
// search bar
<DataSearch
    componentId="SearchSensor"
    dataField={["gebot_name", "info"]}
    className="search"
/>
// display search results in a list with title and description
<ResultCard
    className="right-col"
    componentId="SearchResult"
    size={10}
    onData={data => ({
      title: data.gebot_name,
      description: data.description,
      url: "profile"
    })}
    react={{
      and: ["SearchSensor"]
    }}
/>
</ReactiveBase>
</div>

With `in the same window` you mean you want a modal? – Gabriel Azevedo Jun 18 '19 at 14:45 — Gabriel Azevedo, Jun 18 '19 at 14:45

score 1 · Accepted Answer · answered Jun 20 '19 at 11:49

So to what I understand from your question you want to display a Modal when clicking on result item and show all the details.

If this is the case you can use ReactiveList and render the data according to your choice. For eg:

In v2:

<ReactiveList
   ...
   onData={ res => (
        <div onClick={() => this.handleModal(res)} >{Content}</div>
     )
   }
/>

With this.handleModal you can handle the Modal and display the data.

In v3

<ReactiveList
   ...
   renderItem={ res => (
        <div onClick={() => this.handleModal(res)} >{Content}</div>
     )
   }
/>

Check documentation here:

For v3: https://opensource.appbase.io/reactive-manual/result-components/reactivelist.html

For v2: https://opensource.appbase.io/reactive-manual/v2/result-components/reactivelist.html

Thank you Yash I will try that! – Felix Jun 24 '19 at 09:30 — Felix, Jun 24 '19 at 09:30

How to display detail page from search results in ResultCard?

1 Answers1

Linked