How can you pass params from the client component to the server component?

[royal zenith]

It's a simple use-case. Trying to send a list of id's from that client mapping (a client managing system) to all server components. How is this done in nextjs?

 import ClientComponent from './client-component'
import ServerComponent from './server-component'
 
export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

but the client component manages the server components, as you can see below

export default function ClientComponent({ children }: ChatClientProps) {
  const [chats, setChats] = useState<string[]>(['cuT9MKk', 'EufJ5I8'])

  const addChat = (id: string) => {
    setChats([...chats, id])
  }

  const removeChat = (id: string) => {
    setChats(chats.filter(chatId => chatId !== id))
  }

  return (
    <div className="group flex w-full">
      {chats.map((id, index) => (
          {children id={id}}
      ))}
    </div>
  )
}

[hot yacht]

Hi @royal zenith. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

In Next.js, you can pass data from a client component to a server component through props. However, it's important to note that the data you pass must be serializable. This is because the data is serialized (converted to a string) for use in the browser.

In your case, you can pass the id from the ClientComponent to the ServerComponent as a prop. Here's how you can do it:

export default function ClientComponent({ children }: ChatClientProps) {
  const [chats, setChats] = useState<string[]>(['cuT9MKk', 'EufJ5I8'])

  const addChat = (id: string) => {
    setChats([...chats, id])
  }

  const removeChat = (id: string) => {
    setChats(chats.filter(chatId => chatId !== id))
  }

  return (
    <div className="group flex w-full">
      {chats.map((id, index) => (
          {React.cloneElement(children, { id })}
      ))}
    </div>
  )
}

In the Page component, you can then access the id prop in the ServerComponent:

import ClientComponent from './client-component'
import ServerComponent from './server-component'
 
export default function Page() {
  return (
    <ClientComponent>
      <ServerComponent />
    </ClientComponent>
  )
}

In ServerComponent, you can access the id prop like this:

export default function ServerComponent({ id }) {
  // You can now use the id prop here
}

Please note that if your client components depend on data that is not serializable, you can fetch data on the client with a third party library or on the server with a Route Handler.

For more information, you can refer to the Next.js documentation on Client Components (https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#client-components).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: