extended-salmon

How to implement Algolia with react-query

Is there a way I can separate my query state and render my SearchResults component in another component that isn't my Search component?

import * as React from 'react'

import SearchResults from './SearchResults'

export default function Search() {
  const [query, setQuery] = React.useState('')

  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.preventDefault()
    // It is recommended to debounce this event in prod
    setQuery(event.target.value)
  }

  return (
    <div>
      <input
        onChange={handleOnChange}
        value={query}
        placeholder="Search products"
      />
      <SearchResults query={query} />
    </div>
  )
}

import * as React from 'react'

import SearchResults from './SearchResults'

export default function Search() {
  const [query, setQuery] = React.useState('')

  const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.preventDefault()
    // It is recommended to debounce this event in prod
    setQuery(event.target.value)
  }

  return (
    <div>
      <input
        onChange={handleOnChange}
        value={query}
        placeholder="Search products"
      />
      <SearchResults query={query} />
    </div>
  )
}

2 Replies

sunny-green•2y ago

Yes. State management like redux, Zustand etc Or sync to the url

exotic-emerald•2y ago

or hoist the state I suppose

Gaming

Programming

How to implement Algolia with react-query

Did you find this page helpful?