Data passing between client to server components in nextjs
Unanswered
Rock Dove posted this in #help-forum
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
2 Replies
@Rock Dove 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
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>
</>
)
}