Next.js Discord

Discord Forum

Data passing between client to server components in nextjs

Unanswered
Rock Dove posted this in #help-forum
Open in Discord
Avatar
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
Image

2 Replies

Avatar
Ray
use searchParams in the client component eg /pathname?catalogId=1&salesType=2 then your server component can fetch data with it
export 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>
    </>
  )
}