Next.js Discord

Discord Forum

passing server action props to different component

Unanswered
Alligator mississippiensis posted this in #help-forum
Open in Discord
Alligator mississippiensisOP
what is the proper way to pass server action result into different component without using react hook?
 
export async function handleSearch(searchTerm: string) {
  const encodedSearchTerm = searchTerm.replace('#', '%2523')
  try {
    const result = await searchGuardian(encodedSearchTerm)
    return result
  } catch (error) {
    console.error(error)
  }
}

here's the search input
'use client'

export const SearchInput = ({
  handleSearch
}: {
  handleSearch: (term: string) => void
}) => {
  const handle = useDebouncedCallback((term: string) => {
    handleSearch(term)
  }, 500)

  return (
    <Input
      type='text'
      placeholder='Search'
      className='border-gray-500 bg-slate-800 text-cyan-50'
      onChange={e => handle(e.target.value)}
    />
  )
}

i wanted to pass result from handleSearch into <SearchResults>, but dont know what's the proper way because i still need to fetch the result data inside <SearchResult>
export default function Search() {
  const [searchResults, setSearchResults] = useState([])

  const handleSearchAndUpdate = async (searchTerm: any) => {
    try {
      const result = await handleSearch(searchTerm)
      setSearchResults(result)
    } catch (error) {
      console.error(error)
    }
  }

  return (
    <div className='flex flex-col'>
      <Dialog>
        <DialogTrigger asChild>
          <Button variant='outline'>Search</Button>
        </DialogTrigger>
        <DialogContent className='rounded-lg border-gray-500 bg-slate-800 text-gray-300'>
          <DialogHeader>
            <DialogTitle>Search Guardian</DialogTitle>
            <DialogDescription>
              <SearchInput handleSearch={handleSearchAndUpdate} />
            </DialogDescription>
          </DialogHeader>
          <SearchResults searchResults={searchResults} />
          <DialogFooter>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}

2 Replies

Arboreal ant
There's lots of ways to pass state around in react. It might be worth reading up on different approaches to passing around state. Props, context, queryParams, state managers (like RTK), etc can all be used.

I'm not sure why you don't want to use hooks though? You're already using useState?

I imagine there's some sort of parent component to the search and search results components, so you could potentially pass the search result up to that parent, have the parent do the fetch, and pass the state down to the results component.

Personally I like to have things like search strings in the searchParams in the url. Then your search results component can just listen to those searchParams and call the search function and render the results. This approach means someone can share the link and whoever clicks on it will already have thee search populated.
Arinji
^^ Links are awesome.. make sure to validate very carefully tho.. its the easiest thing to change, with local storage the very dumb people wont figure out how to update it.. the url is the easiest to tamper with :D