Client-side store variables in Server Components
Answered
Chinese Alligator posted this in #help-forum
Chinese AlligatorOP
I have a form inside react server component. This form handled by server action.
On top on form data i need to add a current user ID (from client side redux store).
How can i enrich react server component with client-side redux store data?
Form code here: https://github.com/artemu78/events-n-feedbacks/blob/main/src/app/admin/addorganization/page.tsx
On top on form data i need to add a current user ID (from client side redux store).
How can i enrich react server component with client-side redux store data?
Form code here: https://github.com/artemu78/events-n-feedbacks/blob/main/src/app/admin/addorganization/page.tsx
Answered by aardani
store the client-side store in a hidden input form where you can get it on formData
31 Replies
@Chinese Alligator I have a form inside react server component. This form handled by server action.
On top on form data i need to add a current user ID (from client side redux store).
How can i enrich react server component with client-side redux store data?
Form code here: https://github.com/artemu78/events-n-feedbacks/blob/main/src/app/admin/addorganization/page.tsx
store the client-side store in a hidden input form where you can get it on formData
Answer
or just pass the value directly if you called the server action in client-side
@aardani or just pass the value directly if you called the server action in client-side
Chinese AlligatorOP
thank you Alfonsus, but how i can set a hidden form field value into React Server Component? how can i pass data from client component ?
@aardani how are you using your server action?
Chinese AlligatorOP
i have layout, which render React Server Component and it has a form with form action linked to my server action
import { formSubmitAction } from './action';
...
<form action={formSubmitAction}>
import { formSubmitAction } from './action';
...
<form action={formSubmitAction}>
yes so just add a hidden input inside that form
the value of that hidden input will be passed to
formSubmitActionim sure you can look up on how to insert a hidden <input> in the internet :)
Chinese AlligatorOP
but the data is in client side redux store, i can't use it in React Server Component
you can "use client" to get the data from the client-side redux store
and put it into the <input> field
preferably only get the data thats necessary, not the whole store
@aardani you can "use client" to get the data from the client-side redux store
Chinese AlligatorOP
are there any other options to pass client side data into server-side component?
yes there are,
if you call formSubmitAction in a client component you can simply pass the client-side data to the parameter of the action
@aardani if you call formSubmitAction in a client component you can simply pass the client-side data to the parameter of the action
Chinese AlligatorOP
how can i grab the data from server-side component fields?
you can also not use Server Action and use classic fetch API to pass in the client-side data manually in the body
@Chinese Alligator how can i grab the data from server-side component fields?
you can get the server-side data from the parameter sir
@aardani you can get the server-side data from the parameter sir
Chinese AlligatorOP
so i can reder client-side component inside the server-side one and pass form data as parameter?
but the form data is dynamic... how can i gather it and pass to the child client-side?
but the form data is dynamic... how can i gather it and pass to the child client-side?
theres no such thing as server-side component
only server component which outputs html into the client
so the form are still in the client, not in the server, sir. i think you've misunderstood some things
if you put form action={serverAction} the formData of each <input> in that form, including any client component, would still be sent to the
serverAction in the form of FormDataChinese AlligatorOP
oh!!! i`ll try it
otherwise you can just use this pattern
which calls serverAction from the client-side onSubmit event handler
in there you can pass in any client-side data you want without creating an extra <input> tag
@aardani otherwise you can just use this pattern
Chinese AlligatorOP
thank you very much Alfonsus!!! It works and you saved me few hours of life!!!
@Chinese Alligator thank you very much Alfonsus!!! It works and you saved me few hours of life!!!
so which approach did you end up using?
@aardani so which approach did you end up using?
Chinese AlligatorOP
client-side component with hidden input, inside form