Confused how to work with components and loader/post method's

[gijsroge]

Take this amazing example from @ryanflorence

https://www.youtube.com/watch?v=jd_bin5HPrw

This looks like a joy to work in, but the main thing i'm very confused about is this entire component is just a route file? What if you want a newsletter component that contains all the logic inside, I don't think you want to put all your component's logic in the main route file? How would you approach this if you want to have components?

[hollandThomas]

You can create React components as usual and use Remix's <Form> inside of them. Forms have the action attribute, and as the docs state:

Most of the time you can omit this prop. Forms without an action prop (<Form method="post">) will automatically post to the same route within which they are rendered. This makes collocating your component, your data reads, and your data writes a snap.
If you need to post to a different route, then add an action prop:

<Form action="/projects/new" method="post" />

[gijsroge]

Yeah, but that still requires you to handle the logic on the route module, don't you want to manage your form logic inside the same component? What if the component is used on multiple different routes?

[hollandThomas]

If that's what you want, it's basically "Just JavaScript". Say you have SomeForm.tsx:

// components/SomeForm.tsx
import { Form } from 'remix';

export const handleSomeLogic = (formData: FormData) => {
  // do stuff
}

const SomeForm = () => {
  return (
    <Form method='post'>
      <label>
        Some input
        <input name='someInput' type='text' />
      </label>
      <button name='_action' value='someAction'>
        Submit
      </button>
    </Form>
  );
};

export default SomeForm;

and a route route.tsx:

// routes/route.tsx
import type { ActionFunction } from 'remix';
import SomeForm, { handleSomeLogic } from '~/components/SomeForm';

export const action: ActionFunction = async ({ request }) => {
  const formData = await request.formData();
  const result = handleSomeLogic(formData);
  // do other stuff
};

const Route = () => {
  return <SomeForm />;
};

export default Route;

[gijsroge]

Yeah that makes allot of sense and sounds logical hehe

Had the same discussion on a related issues #1514 (comment)

Thanks for taking your time to show an example!