My custom form component, <ClientForm>, is built using Radix Primitives.
"use client";
import { FC } from "react";
import * as Form from "@radix-ui/react-form";
const ClientForm: FC = (props) => (
<Form.Root {...props}>
<Form.Field name="name">
<Form.Label>Name</Form.Label>
<Form.Control type="text" required />
</Form.Field>
<Form.Submit>OK</Form.Submit>
</Form.Root>
);
export default ClientForm;
In my page.tsx file, I am trying to render this form component and pass in a server action along with other attributes:
import ClientForm from "@/components/ClientForm";
// server action
import { create } from "@/app/actions";
const Home = () => {
return (
<section>
<h1>Home</h1>
<ClientForm action={create} />
</section>
);
};
However, I encountered a type error:
./src/app/page.tsx:8:19
Type error: Type '{ action: () => void; }' is not assignable to type 'IntrinsicAttributes'.
Property 'action' does not exist on type 'IntrinsicAttributes'.
6 | <section>
7 | <h1>Home</h1>
> 8 | <ClientForm action={create} />
| ^
9 | </section>
10 | );
11 | };
I would like to know how I can make the ClientForm component accept the server action and other HTML form attributes seamlessly.