Reactivesearch.io Docs - Search stack for Elasticsearch, OpenSearch, Solr, MongoDB

Overview

The How-to guide enumerates steps to extract out specific result from raw response and render it separately on the UI.

Pre-requisite: A starter app

Take 👇🏻 as a starting point. The starter app contains a search UI which uses an index with a promoted result. The idea is to extract the promoted result and render it as a separate UI element.

The Steps

Extract promoted item from raw response

The raw response for the result component would contain the promoted item(s) as a separate key. We utilize the transformResponse prop to extract the promoted items and store them in a local component state.

Create a local state variable to store extracted data

Copy

import { React, useState } from "react";
// ... other imports

const Main = () => {
  const [extractedResult, setExtractedResult] = useState(null);

  // return ...  

}

Pass transformResponse prop to ReactiveBase

Copy

import { React, useState } from "react";
// ... other imports

const Main = () => {
  const [extractedResult, setExtractedResult] = useState(null);

  return (
    <ReactiveBase
      //... other props
      transformResponse={async (response, componentId) => {

        // `SearchResult` is the componentId for the result(ReactiveList) component
        if (componentId === "SearchResult") {
        
          // check if promoted result(s) is present
          if (response.promoted) {
            // store the promoted result(s) in the local state
            setExtractedResult(response.promoted);
            // remove the promoted result(s) to avoid showing them in the ReactiveList UI
            delete response.promoted;
            // return modified response
            return Promise.resolve({ ...response });
          }
        }

        return Promise.resolve({ ...response });
      }}
    >
    {/* ... */}
    </ReactiveBase>);

}

Read more about transformResponse prop here

Render the extracted data as a separate UI element

We are rendering the custom UI for the extracted result(s) right over the top of the search UI.

Copy

<ReactiveBase
 // ... other props
>
  {extractedResult?.map(
    ({ doc: { title = "promoted item", NER = [] } }) => (
      <div className="coupon" key={title}>
        <div className="container">
          <h3>{title}</h3>
        </div>

        <div className="container" style={{ backgroundColor: "white" }}>
          <h2>
            <b>20% OFF YOUR PURCHASE</b>
          </h2>

          <div className="tags-container">
            {NER.map((tagItem) => (
              <span
                key={tagItem}
                className="ant-tag css-1wismvm inherited-styles"
              >
                {tagItem}
              </span>
            ))}
          </div>
        </div>
        <div className="container">
          <p>
            Use Promo Code: <span className="promo">BOH232</span>
          </p>
          <p className="expire">Expires: Jan 03, 2030</p>
        </div>
      </div>
    )
  )}
</ReactiveBase>