Can't get reactive-search search results

Question

i am new in react and have a problem. I wanted to create a simple search page for the beginning and I already have an elasticsearch cluster.

I followed this tutorial: https://codeburst.io/how-to-build-an-e-commerce-search-ui-with-react-and-elasticsearch-a581c823b2c3

the example works as it should. now i have adapted the example to my needs:

import React, { Component } from "react";
import "./../index.css";
import { ReactiveBase, DataSearch, SingleRange, ResultCard, CategorySearch, ReactiveList, SingleList, MultiList, ResultCardsWrapper } from '@appbaseio/reactivesearch';


class ReactiveSearchP extends Component {
    render() {
      return (
        <ReactiveBase
            app="index"
            url="https://page:port"
            credentials="user:pw"
        >
            <DataSearch
                componentId="mainSearch"
                dataField={["article"]}
                queryFormat="and"
                iconPosition="left"
            />
            <MultiList
                componentId="price"
                dataField="price.raw"
                title="Price"
                size={5}
            />
            <ResultCard
                componentId="results"
                dataField="article"
                react={{
                  "and": ["mainSearch", "price"]
                }}
                onData={(res)=>({
                  "image": res.image,
                  "title": res.article
                })}
            />
        </ReactiveBase>
      );
    }
}

export default ReactiveSearchP;

For legal reasons I am not allowed to give the reactivebase probs.

My problem now is when i test this code, there is only a white page. If I delete the resultcard component, everything is displayed as intended.

So I'm looking for a solution to display my search results as a result card, but I don't find any. I've tried several tutorials but I can't get it.

Would be glad if someone could help me. If information is still missing, let me know.

Thanks

score 0 · Answer 1 · answered Apr 15 '20 at 07:28

Town,

The tutorial you followed is based on an older version of ReactiveSearch. I may suggest you follow latest tutorial over here: https://medium.appbase.io/

Also, you can look at the migration guide: https://docs.appbase.io/docs/reactivesearch/v3/advanced/migration/

To give you some context why the result may not be showing up is because we have changed the result components working in the latest version. Here is the docs on how to use ResultCard in the latest version: https://docs.appbase.io/docs/reactivesearch/v3/result/resultcard/

Hope this Helps!

Can't get reactive-search search results

1 Answers1