How to submit forms in page.tsx

[knotty glacier]

Is it considered a bad idea to make an entire page client rendered with "use client"
My page.tsx has multiple forms doing different things. How do I get the forms to submit? I cannot add an onSubmit handler since it is not a client component.

It would also be annoying if I have to create a seperate client component for every different type of form in my app

[rare current]

Hi @knotty glacier. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

It's not necessarily a bad idea to make an entire page client-rendered with "use client" if your use case requires it. However, it's generally recommended to use a mix of server and client components to leverage the benefits of both rendering methods.

For your situation with multiple forms, you can create separate client components for each form and use the onSubmit handler within those client components. This way, you can handle form submissions individually without making the entire page a client component.

Here's an example of how you can create a client component for a form:

// FormComponent.js
'use client';

export default function FormComponent() {
  const handleSubmit = async (event) => {
    // Handle form submission logic here
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Your form fields and buttons go here */}
    </form>
  );
}

Then, you can import and use this FormComponent in your page.tsx:

import FormComponent from './FormComponent';

export default function Page() {
  return (
    <div>
      {/* Other components and content */}
      <FormComponent />
      {/* Other components and content */}
    </div>
  );
}

This approach allows you to keep your form logic separate and maintainable without making the entire page client-rendered.

Sources:

• Building Forms with Next.js (https://nextjs.org/docs/guides/building-forms)
• Server and Client Components (https://beta.nextjs.org/docs/rendering/server-and-client-components)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@knotty glacier kapa.ai is still learning and improving, please let us how it did by reacting below

[knotty glacier]

@rare current It would be annoying to have to create a new client component for every single type of form in my app

[rare current]

Let me check the knowledge base for you. One moment! :books:

---

I understand that creating a separate client component for every form might be cumbersome. In that case, you can create a reusable client component for your forms and pass the necessary props to handle different form types.

Here's an example of a reusable form component:

// ReusableFormComponent.js
'use client';

export default function ReusableFormComponent({ onSubmit, children }) {
  const handleSubmit = async (event) => {
    event.preventDefault();
    onSubmit(event);
  };

  return (
    <form onSubmit={handleSubmit}>
      {children}
    </form>
  );
}

Now, you can use this ReusableFormComponent in your page.tsx and pass the required onSubmit handler and form fields as children:

import ReusableFormComponent from './ReusableFormComponent';

export default function Page() {
  const handleForm1Submit = (event) => {
    // Handle form 1 submission logic here
  };

  const handleForm2Submit = (event) => {
    // Handle form 2 submission logic here
  };

  return (
    <div>
      <ReusableFormComponent onSubmit={handleForm1Submit}>
        {/* Form 1 fields and buttons go here */}
      </ReusableFormComponent>

      <ReusableFormComponent onSubmit={handleForm2Submit}>
        {/* Form 2 fields and buttons go here */}
      </ReusableFormComponent>
    </div>
  );
}

This approach allows you to reuse the same client component for different forms while keeping the form logic separate and maintainable.

Sources:

• Building Forms with Next.js (https://nextjs.org/docs/guides/building-forms)
• Server and Client Components (https://beta.nextjs.org/docs/rendering/server-and-client-components)

---

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: