Creating different functionality from the same components
Unanswered
Chum salmon posted this in #help-forum
Chum salmonOP
I have a component, ModelFilter, which is essentially 3 dropdown inputs that allow a user to select a specific model ATV from a larger list by filtering. Upon a user selecting the model, I have a callback out of the ModelFilter,
Thank you
onMachineSelectedCallback, which is invoked upon a user selecting the model. My question is, since my page is on the server, and this ModelFilter component is a client component, and I can't pass the callback through the server back from the client, should I create a "child component", in which I make another component like ModelFilterGarage who's only HTML is the ModelFilter, but with extended client functionality like making an API call to my server to add that machine to their garage on the server-side, and then replace that on the server component for the page?Thank you
56 Replies
Chum salmonOP
^ This is the model filter component on my
page.js scriptChum salmonOP
Like this
so it's almost like ModelFilterSlugReroute is a child of ModelFilter to add functionality to it
Hybrid approach such as prefetching data in the server and letting the client to do further modification to the data is a common pattern
@Chum salmon Click to see attachment
this seems ok to me?
@aardani Hybrid approach such as prefetching data in the server and letting the client to do further modification to the data is a common pattern
Chum salmonOP
The issue I was running into was since
ModelFilter was a client component and it was being used on my page.js which was SSR, I couldn't have my onMachineSelectedCallback work, since it would try and run the callback on the server even though it's ran on the client.can you screenshot ModelFilter?
@aardani can you screenshot ModelFilter?
Chum salmonOP
https://pastie.io/nngpne.js I'm almost confident there is a better way to do what I was trying to do 😄 I come from the game dev and C family world so this is all different to me. But it feels wrong to do this, though it works
in the meantime
have you checked out react.dev?
why do you think it doesn't work?
i dont think it would run the callback on t he server
because the Server only tried to prerender client component using the initial state of the useState
because the Server only tried to prerender client component using the initial state of the useState
Chum salmonOP
Well I know why it wouldn't work
That's why I did what I did
I mean, I'm still a little fuzzy on client and server components and exactly how it's rendered and how they communicate during the request, but I've read the docs too much lol
@aardani i dont think it would run the callback on t he server
because the Server only tried to prerender client component using the initial state of the useState
Chum salmonOP
Well my original design wasn't working in general because it was a client component trying to accept a server function as a callback
But with this child component thing I made it seems to work well
nice.. so what didnt work? :v
i meant with the current setup
Chum salmonOP
Oh, well my current setup works, I was just wondering if that's the way other people would do it, because I'm not sure what the standards are for this stuff
is it common to pass callbacks into components?
and is it common to make child components?
yes
yes
well ideally you would use the context api instead of prop drilling
but i dont think thats a big deal since you are only prop drilling one level down
Its common to make nested child components, its also common to lift the state up and leave the child component be a "Controlled" component
Chum salmonOP
context API would be good for this? I thought context was more for theming and stuff 🤔
ContextAPI is generally about passing data (including setter/functions) deep in the component
which conveniently is a common use case for "theming and stuff"
thats why its not a big deal
Chum salmonOP
Okay cool
What did you mean by "lifting the state up"?
you can just call
onMachineSelected inside the <ModeLFilter> . Whats the problem calling it there?@aardani you can just call `onMachineSelected` inside the `<ModeLFilter>` . Whats the problem calling it there?
Chum salmonOP
Because I needed to pass in the reroute endpoint. I wasn't sure if you could put it in model filter and pass that additional parameter or not
Why not pass
rerouteEndpoint directly into ModelFilter?Chum salmonOP
Because
ModelFilter in itself doesn't do any reroutingthat's the added functionality of the child component
the child component takes the machine ID and passes it as a slug to a URL
separation of concern?
@aardani separation of concern?
Chum salmonOP
Not that as much as I have multiple use cases for a model filter
well mk, i guess thats allright if you want to make ModelFilter component reusable
ah ok'
fair point
Chum salmonOP
One of them is to reroute the user to a page like /machines/[slug]
and the other might be to use my client API to add a machine to their garage
but they still have the same functionality of selecting a machine and doing something once they select it
well this looks good to me,
but that prop drilling though xD (machineStructureJSON)
Chum salmonOP
haha yeah that's where I'm still learning
The reason for the JSON drilling is so I don't make 2 trips
I just pass it straight from the server to the client during the initial request
I can't think of a way to pass that data to the client component without making a call once the component is rendered and receiving the object back