Data passing between client to server components in nextjs
Unanswered
Rock Dove posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/3.png)
Rock DoveOP
In my project Im using drop downs for filter some data and after click submit, the API data should pass to table and populate the rows.
Is this a possible way to do,
dropdowns and submit button in client component,
table in server component
Is this a possible way to do,
dropdowns and submit button in client component,
table in server component
![Image](https://cdn.discordapp.com/attachments/1179000864107667476/1179000864338350090/image.png?ex=6578311e&is=6565bc1e&hm=016845a185e21702b6b900963f98ae11cc9f25ca594bacfdf1f4c75d35ceadf2&)
2 Replies
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
use searchParams in the client component eg
/pathname?catalogId=1&salesType=2
then your server component can fetch data with itexport default function ExampleClientComponent() {
const router = useRouter()
const pathname = usePathname()
const searchParams = useSearchParams()!
// Get a new searchParams string by merging the current
// searchParams with a provided key/value pair
const createQueryString = useCallback(
(name: string, value: string) => {
const params = new URLSearchParams(searchParams)
params.set(name, value)
return params.toString()
},
[searchParams]
)
return (
<>
<p>Sort By</p>
{/* using useRouter */}
<button
onClick={() => {
// <pathname>?sort=asc
router.push(pathname + '?' + createQueryString('sort', 'asc'))
}}
>
ASC
</button>
{/* using <Link> */}
<Link
href={
// <pathname>?sort=desc
pathname + '?' + createQueryString('sort', 'desc')
}
>
DESC
</Link>
</>
)
}