Example: Resolve search term

In this article you will find:

Goal

Expose the entered search term on the results page.

Prerequisite

Steps to resolve

1. Create/Open the components folder in the designated react directory (e.g. hawksearch/react/components).

2. Create new component file for the search term (e.g. SearchTerm.tsx) and open for editing. Use the following sample as a base for the component:

   import React, { useEffect, useState } from 'react'; import { useHawksearch } from 'react-hawksearch'; function SearchTerm() { const { store: { searchResults }, } = useHawksearch(); const [keyword, setKeyword] = useState(''); useEffect(() => { if (searchResults) { setKeyword(decodeURIComponent(searchResults.Keyword || '')); } }, [searchResults]); return ( <div className="custom-class-name"> <h1>{keyword}</h1> </div> ); } export default SearchTerm;

3. Open the results widget js file for editing and import the newly created component

   ... import SearchTerm from '../components/SearchTerm'; ...

4. Place the component in the desired place

   function App() { return ( <Hawksearch config={hawkConfig}> <QueryStringListener /> <div className="hawk"> <div className="hawk__header"> <SearchBox /> </div> <div className="custom-wrapper-class"> <SearchTerm /> </div> <div className="hawk__body"> <FacetRail /> <Results /> </div> </div> </HawkSearch> ); }

    

5. Save, build the react bundle and re-build the solution.