Conditional Display in React InstantSearch
We released React InstantSearch Hooks, a new InstantSearch library for React. We recommend using React InstantSearch Hooks in new projects or upgrading from React InstantSearch.
Handling no results
Not all queries lead to results, and it’s important to let users know when this happens. This gives you an opportunity to provide hints on how to adjust the query. This way, you can ensure users don’t leave your website or search using an external search engine.
Single index
The easiest way to display a fallback message when a query doesn’t return results is to use the connectStateResults connector.
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>;
Note that the above example lets you pass anything to display results, including InfiniteHits or a custom component that uses the connectHits connector.
Multi indices
If you’re using the Index widget and want to apply conditional rendering, you need to access the searchResults, but also the results of all indices via 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 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
Users make mistakes, which can cause them to 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 ClearRefinements widget.
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 the empty query
By default, React InstantSearch always shows you results, even when the query is empty. Depending on your use case and the way you want to build your UI, you may want to only show results when there’s a query.
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
When an error occurs, you might want to display a specific piece of content to help the user go back to a normal state.
1
2
3
const Results = connectStateResults(({ error }) =>
error ? <div>Some error</div> : <div>No error</div>
);
