Reputation: 11
I'm using react-instantsearch with SearchBox to performance search tasks, when type some letters in SearchBox there will show the results by Hits component. The problem is I can't add value attribute on SearchBox to change text in it manually:
const [searchKeywords, setSearchKeywords] = useState("")
<InstantSearchNext
indexName="items"
searchClient={searchClient}
>
<SearchBox
id="items-search"
value={searchKeywords}
/>
</<InstantSearchNext>
The value attribute doesn't work above
Is there a way to do that?
I tried to use document.querySelector to set input box value inside SearchBox but can't get it work.
Upvotes: 1
Views: 132
Reputation: 399
If you need to set the value of the query from outsite the searchbox, you can use the function refine
from the react hook useSearchBox
as follows:
const { refine } = useSearchBox();
const changeQuery = (newValue) => refine(newValue);
Upvotes: 0