Can't fill Search Box from Hits or customize value

[terencere]

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?

[Haroenv]

To set the value of the query, you can use useSearchBox in an external component (also could be called a custom widget):

function Keywords() {
  const { refine, query } = useSearchBox();

  return <button type="button" disabled={query === "books"} onClick={() => refine("books")}>Books</button>
}

Of course you can go further in that, but in general setting the value in a callback instead of synchronising it with a local state avoids you having to consistently keep it updated for browser navigation, reset or other things. Always trust the response of the hooks.

[terencere]

Thanks for reply, I think our case is more complex, I'll try to find other way to implement it.

[Haroenv]

What it would eventually boil down is somewhere which sets the query right? that can be done using refine of search box, instead of trying to sync it with state. Hope you find a good solution!