#DaMango, Server Function Fetching -> Server Component Rendering
ripe escarp
Yes I am able to get the form data and use a query to fetch data. That works just fine
mint osprey
export default function Searchbar() {
async function Search(formData: FormData) {
'use server'
//structure queryString with formData
const queryString = ...formatting logic
//
const data = await fetch(queryString).then(async(res) =>{return await res.json()});
revalidate("/")
return data //not sure if I should try to pass data through here?
}
return (
<div>
<form action={Search}>...inputs</form>
{data && <Component data={data}/>}
</div>
}
Alright make sure it's turned to json tho
so it's parseable
ripe escarp
I'm using a mocked endpoint right now so I haven't done that yet, but good point
mint osprey
async function Search(formData: FormData) {
//structure queryString with formData
const queryString = ...formatting logic
//
const data = await fetch(queryString).then(async(res) =>{return await res.json()});
revalidate("/")
return data //not sure if I should try to pass data through here?
}
export default function Searchbar() {
const data = await Search()
return (
<div>
<form action={Search}>...inputs</form>
{data && <Component data={data}/>}
</div>
}
First you should probaly split the functions, no real need to make Search local, and it organizes it a bit better
ripe escarp
hmm, ok
I thought it could be better to define it inside the Searchbar component since its not reused anywhere else, and it seemed like it could help with data sharing between components
mint osprey
Oh wait
ripe escarp
but the whole point is I don't know how to share the data between components
using this method *
I guess I am open to doing it another way if there is a more standard way of doing it in Next 14?
but would prefer to try to keep as much as i can server side, the only examples I've seen are storing data in a useState or useFormState hook and make the SearchBar component a client component.
Which would then make the <Component data={data}/> a client component too which is kind of a bummer for me
@tribal crown any suggestions?
mint osprey
My bad, sorry my computer bugged out on me.
I think I know how you could approch this
ripe escarp
mmk
mint osprey
```js
async function Search(formData: FormData) {
//structure queryStri...
So I think action, like onChange and onSubmit passes an event value
if I'm not mistaken
ripe escarp
Right, it passes a FormData type
mint osprey
And the event value will save us.
As event has: Target
which defines our form
If our form is defined we can append into the body without having to check if window or document exists or using any sort of client hooks
And we can append a component
where ever in the body of the document
and pass the data through the props
Make sense?
mint osprey
I guess I'm wondering how to pass the formdata event then
It's already passed for us
ripe escarp
how do you access the event value
ripe escarp
hmm
mint osprey
onSubmit is an event, certain events like onSubmit, onChange, action, etc pass the event value into the function the event is assigned
ripe escarp
ya i get that
i dont think the action property passes the whole event by default though
so i need to use onsubmit?
mint osprey
<form onSubmit={}></form>
This would be
function myFunction(e)// e meaning event {
var form = e.target // Defines <form></form>
}
(<form onSubmit={myFunction}></form>)```It may, I just don't remember if it does
You could use onChange
actually instead of form
why don't you use a <input>
and use <input onChange={}></input>
@ripe escarp Would you like to call and I can show you what I mean?
ripe escarp
sure
mint osprey
Alr