Concepts / Building Search UI / Conditional display
Oct. 11, 2019

Conditional Display

Handling no results

When a query returns no results, it is important to let the user know that their query has led to no results. By doing so, the UI acknowledges that not all queries lead to some result and with some additional hints you can let them continue to use the search. This way, there is less chance that the user will leave the website to do a search using an external search engine. There are various strategies that can be implemented for the “no-result”. This guide will walk you through one that can be easily implemented with InstantSearch.js:

  • first you will improve the message that you provide to the user
  • then you will add a button to let the user clear the filters To help you do conditional rendering based on the searchState and the searchResults of InstantSearch, we provide the connectStateResults connector.

Single index

1
2
3
4
5
6
7
8
const Content = connectStateResults(
  ({ searchState, searchResults }) =>
    searchResults && searchResults.nbHits !== 0
      ? <div>Some results</div>
      : <div>
          No results has been found for {searchState.query}
        </div>
);

Multi indices

If you’re using the Index API and want to apply some conditional rendering you have access to the searchResults but also to all the results of all used indices looking at allSearchResults.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
const App = () => (
  <InstantSearch indexName="first" searchClient={searchClient}>
    <SearchBox />
    <AllResults>
      <div>
        <Index indexName="first">
          <IndexResults>
            <div>
              <div>first: </div>
              <Hits />
            </div>
          </IndexResults>
        </Index>
        <Index indexName="second">
          <IndexResults>
            <div>
              <div>second: </div>
              <Hits />
            </div>
          </IndexResults>
        </Index>
        <Index indexName="third">
          <IndexResults>
            <div>
              <div>third: </div>
              <Hits />
            </div>
          </IndexResults>
        </Index>
      </div>
    </AllResults>
  </InstantSearch>
);
const IndexResults = connectStateResults(
  ({ searchState, searchResults, children }) =>
    searchResults && searchResults.nbHits !== 0 ? (
      children
    ) : (
      <div>
        No results has been found for {searchState.query} and index{' '}
        {searchResults ? searchResults.index : ''}
      </div>
    )
);
const AllResults = connectStateResults(({ allSearchResults, children }) => {
  const hasResults =
    allSearchResults &&
    Object.values(allSearchResults).some(results => results.nbHits > 0);
  return !hasResults ? (
    <div>
      <div>No results in category, products or brand</div>
      <Index indexName="first" />
      <Index indexName="second" />
      <Index indexName="third" />
    </div>
  ) : (
    children
  );
});

Let the user clear all the filters

To go further, you can also let the user clear their filters and start their search from scratch. This way, you allow the user to make a mistake. To be able to do this, you need to render a ClearRefinements widget with your empty state:

1
2
3
4
5
6
7
8
9
10
11
const Content = connectStateResults(
  ({ searchState, searchResults, children }) =>
    searchResults && searchResults.nbHits !== 0 ? (
      <div>{children}</div>
    ) : (
      <div>
        No results has been found for "{searchState.query}"
        <ClearRefinements />
      </div>
    )
);

Handling the empty query

By default React InstantSearch will always show you results even when the query is empty. In some cases you may want to hide the results of the empty query.

1
2
3
4
5
6
7
8
const Content = connectStateResults(
  ({ searchState }) =>
    searchState && searchState.query
      ? <div>
          The query {searchState.query} exists
        </div>
      : <div>No query</div>
);

Handling errors

When an error occurs, you might want to display some specific content helping the user go back to a search that was successful.

1
2
3
4
const Content = connectStateResults(
  ({ error }) =>
    error ? <div>Some error</div> : <div>No error</div>
);

Did you find this page helpful?