Passing Props
Answered
Cuvier’s Dwarf Caiman posted this in #help-forum
Cuvier’s Dwarf CaimanOP
Sup devs.. i've been thinking for this in a 2 days now.. and i can't seem to see a right solution over the internet..
.
.
.
How to pass a props from client component to server component without rendering the server component in a client??...
.
.
.
I got some answers like use the composition pattern on doc.
export function ClientComponent ( { children } : { children : React.ReactNode } ) {
return (
<div>
{children}
<div/>
)
}
---------------------
which should look like this...
<Client Component>
<ServerComponent/>
<Client Component/>
.
.
But i can't see how can I even pass the props from client to server without rendering it to client..
.
.
.
How to pass a props from client component to server component without rendering the server component in a client??...
.
.
.
I got some answers like use the composition pattern on doc.
export function ClientComponent ( { children } : { children : React.ReactNode } ) {
return (
<div>
{children}
<div/>
)
}
---------------------
which should look like this...
<Client Component>
<ServerComponent/>
<Client Component/>
.
.
But i can't see how can I even pass the props from client to server without rendering it to client..
Answered by joulev
Well you can’t. It is impossible to pass React props from client components to server components. But you can pass data via other means https://nextjs-faq.com/sharing-client-side-state-with-server-components
8 Replies
@Cuvier’s Dwarf Caiman Sup devs.. i've been thinking for this in a 2 days now.. and i can't seem to see a right solution over the internet..
.
.
.
How to pass a props from client component to server component without rendering the server component in a client??...
.
.
.
I got some answers like use the composition pattern on doc.
export function ClientComponent ( { children } : { children : React.ReactNode } ) {
return (
<div>
{children}
<div/>
)
}
---------------------
which should look like this...
<Client Component>
<ServerComponent/>
<Client Component/>
.
.
But i can't see how can I even pass the props from client to server without rendering it to client..
Well you can’t. It is impossible to pass React props from client components to server components. But you can pass data via other means https://nextjs-faq.com/sharing-client-side-state-with-server-components
Answer
@joulev Well you can’t. It is impossible to pass React props from client components to server components. But you can pass data via other means https://nextjs-faq.com/sharing-client-side-state-with-server-components
Cuvier’s Dwarf CaimanOP
ok I see the solution there. kind of storing the data on the url params..
usual solution for the search bars
.
.
But what if I have a client component, and like I click the button and change some STATE on my CLIENT COMPONENT..
and my server component is dependent on that STATE? how can i retrieve the data on that STATE to SERVER
not possible?
usual solution for the search bars
.
.
But what if I have a client component, and like I click the button and change some STATE on my CLIENT COMPONENT..
and my server component is dependent on that STATE? how can i retrieve the data on that STATE to SERVER
not possible?
When you make the click update the url parameters?
using the router clientside
@Jboncz When you make the click update the url parameters?
Cuvier’s Dwarf CaimanOP
so that's the best solution?
I trust @joulev wouldnt have steered you wrong, so im going to go out on a limb and say yes.
@Cuvier’s Dwarf Caiman so that's the best solution?
Yes. Server components can only read the incoming request, so you must store it in a place included in the incoming request (url or cookies)