InstantSearch / React / V6 / Guides

Conditional Display in React InstantSearch

This version of React InstantSearch has been deprecated in favor of the latest version of React InstantSearch.

This guide describes what to do when there are no results, when there’s no query, or when there are errors. Sometimes, though, users may not get any hits if their device can’t access the network or the network connection is slow.

If you want to feature content in your search results based on a set of conditions, you can use Algolia Rules to:

You should also consider injecting featured content into your search results.

To learn how to suppress InstantSearch’s initial search query, check out the conditional requests guide.

Handling no results

Since not all queries lead to results, it’s essential to let users know when this happens by providing hints on how to adjust the query.

Single index

The easiest way to display a fallback message when a query doesn’t return results is to use the connectStateResults connector.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12

const Results = connectStateResults(
  ({ searchState, searchResults, children }) =>
    searchResults && searchResults.nbHits !== 0 ? (
      children
    ) : (
      <div>No results have been found for {searchState.query}.</div>
    )
);

<Results>
  <Hits />
</Results>;

The preceding example lets you pass anything to display results, including infinite-hits or a custom component that uses the connectHits connector.

Multi indices

If you’re using the Index widget with conditional rendering, access the searchResults and the results of all indices (with allSearchResults).

Copy 
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 have 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 filters

If a user makes a mistake, they may not find any results. You can account for this by providing a way to clear filters right from the “no results” state so they can start over.

You can achieve this with the clear-refinements widget.

Copy 
1
2
3
4
5
6
7
8
9
10
11

const Results = connectStateResults(
  ({ searchState, searchResults, children }) =>
    searchResults && searchResults.nbHits !== 0 ? (
      children
    ) : (
      <div>
        No results have been found for "{searchState.query}"
        <ClearRefinements />
      </div>
    )
);

Handling empty queries

By default, InstantSearch always shows you results, even when the query is empty. Depending on your use case and how you build your UI, you may only want to show results when there’s a query.

Copy 
1
2
3
4
5
6
7

const Results = connectStateResults(({ searchState }) =>
  searchState && searchState.query ? (
    <div>Searching for query {searchState.query}</div>
  ) : (
    <div>No query</div>
  )
);

Handling errors

If an error occurs, you can display a specific piece of content to help the user return to the standard state.

Copy 
1
2
3

const Results = connectStateResults(({ error }) =>
  error ? <div>Some error</div> : <div>No error</div>
);
Did you find this page helpful?