Do i have to create a new component for every button if i want to keep my project SSR?
Answered
Arboreal ant posted this in #help-forum
Arboreal antOP
I have a lot of buttons, each with different functionality. My question is, is it possible to make one reusable button component? If so, how would I pass the logic for that button? From what I understand, you can't have onClick in a server-side component.
Answered by Clown
Yes you cant pass a
The choices you have is to create many different buttons or create a single client side button which you pass a prop into to change its behavior, making something like a "variant" prop
onClick in a server component.The choices you have is to create many different buttons or create a single client side button which you pass a prop into to change its behavior, making something like a "variant" prop
4 Replies
@Arboreal ant I have a lot of buttons, each with different functionality. My question is, is it possible to make one reusable button component? If so, how would I pass the logic for that button? From what I understand, you can't have onClick in a server-side component.
Yes you cant pass a
The choices you have is to create many different buttons or create a single client side button which you pass a prop into to change its behavior, making something like a "variant" prop
onClick in a server component.The choices you have is to create many different buttons or create a single client side button which you pass a prop into to change its behavior, making something like a "variant" prop
Answer
@Clown Yes you cant pass a `onClick` in a server component.
The choices you have is to create many different buttons or create a single client side button which you pass a prop into to change its behavior, making something like a "variant" prop
Arboreal antOP
how would i go about making the variant thing, i would have all the logic already defined in the button component and then in the prop tell it what logic to use?
Tonkinese
Define an object taht has all of the methods you might need that button to execute, and then pass in a key of that object as a prop. That way you can create just a few buttons and reuse them.