Next.js Discord

Discord Forum

Issue building a search component

Answered
Rhinelander posted this in #help-forum
Open in Discord
Avatar
RhinelanderOP
So I am currently trying to implement a feature in my web application where a user can enter some text in a text field and then I use that text entered from that user to fetch information about what they entered, the issue I am running into is I need use a client component to handle the text state changing pass and then fetch data using an api about the text that the user entered. I cannot have a server component inside a client component directly so how could I fetch the data in the client component? Would using an API route be the best approach?
Answered by averydelusionalperson
Image
View full answer

38 Replies

Avatar
do something like this
Image
have search text on query params
and search input on a different client component
Avatar
Image
Answer
Avatar
RhinelanderOP
sorry im still trying to learn everything but your passing the query to a client component and using routing to send the user to another page?
Avatar
not another page, same page
but adding search query to it
Image
I've pagination code cause I've pagination too
but I suppose you won't need it
Avatar
RhinelanderOP
I see
can you explain where you are getting the query from one users function?
I see where you are initializing it and assigning it to searchparams
but im not sure what that is
Avatar
you automatically get searchParams as props in a page
Image
Avatar
RhinelanderOP
so your getting the query from the url and passing it as a prop to your CustomSearchBar component?
Avatar
yea
Avatar
RhinelanderOP
okay so how is the url being updated from the query?
idk if I asked that in the right way
Avatar
Image
Avatar
RhinelanderOP
oh I see
thank you
your updating it whenever the form is submited
Avatar
yeah
Avatar
RhinelanderOP
okay very cool
thank you for your help
Avatar
no problem, if your problem is solved, consider marking answer as solution
Avatar
RhinelanderOP
gotcha
Avatar
ahh
not that
I mean the message that helped you
Avatar
RhinelanderOP
oh my bad
Avatar
🫡
Avatar
RhinelanderOP
appreciate you