Description
Is your feature request related to a problem? Please describe.
Currently I'm trying to execute an action using Form component from React Router's v6, that basically under the hood implements the native HTML Form element. It is a simple implementation to use it.
Code reference:
export const action: ActionFunction = async ({ request }) => {
const userId = await requireUserId(request);
const formData = await request.formData();
const title = formData.get("title");
const body = formData.get("body");
if (typeof title !== "string" || title.length === 0) {
return json<ActionData>(
{ errors: { title: "Title is required" } },
{ status: 400 }
);
}
if (typeof body !== "string" || body.length === 0) {
return json<ActionData>(
{ errors: { body: "Body is required" } },
{ status: 400 }
);
}
const note = await createNote({ title, body, userId });
return redirect(`/notes/${note.id}`);
};
<Form method="post">
<div>
<label>
<span>Title: </span>
<input
ref={titleRef}
name="title"
aria-invalid={actionData?.errors?.title ? true : undefined}
aria-errormessage={
actionData?.errors?.title ? "title-error" : undefined
}
/>
</label>
{actionData?.errors?.title && (
<div className="pt-1 text-red-700" id="title-error">
{actionData.errors.title}
</div>
)}
</div>
<button type='submit'>submit</button>
...
Using the native input's to perform that action works, but when I tried to use it with the BigDesign components, I can't use them because they only support the controlled behavior.
Describe the solution, feature, or improvement you'd like
I try to use the styled components to apply to my uncontrolled input but the styles are not exported. So I recreate the input component without the controlled state and is working.
Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.
Additional context
React router Form
React router Action