paper terrace
I would like to know if this is a bad practice or not:
<Form> sounds like something linked to the route logic and not to a Component. But when I have a Component that has a list of Buttons, each element needs to have its own <Form> so I can know which of the buttons and hidden associated inputs has been clicked.
I can illustrate with an example if the question is not self-explanatory
old owl
well the best part about the form component is you can tell it where to submit to, or it submits to current route by default, in my experience I found it best to usually create a component like UserForm and then reuse it on create/edit screens with the same layout and the form submits to create or edit depending on where you're at
paper terrace
My Component is <MemberList members={members} invitations={invitations}>
and looks like this (see attachment).
Each row (a member or an invitation) is wrapped by a <Form> and this Component <MemberList> is the one imported in my route.
With this example, any suggestions on how to have the respective <Form> outside?
Not having Remix's <Form> inside the component simplifies some unit tests for my component and the corresponding story in Storybook)
old owl
i have the same exact behavior in my app too, I am assuming those forms are used to change the user role etc? What I recommend is trying out a fetcher for this. That proved to be more useful in my case because later on i added another dropdown and just added another fetcher for that, also easier to test where you just mock a fetcher and make sure the submit is called on click
eg:
export const useChangeRoleFetcher = () => {
const fetcher = useFetcher();
return {
...fetcher,
submit: (values, options) => fetcher.submit(values, {...options, method: "post", action:"blah" })
}
}
and then you can use it inside of each component