Typescript definitions

[SergiuPlesco]

Describe the bug

Typescript definitions are incorrect.

Your minimal, reproducible example

no sandbox

Steps to reproduce

`"use client";
import React from "react";
import {
createFormFactory,
FormApi,
mergeForm,
useTransform,
} from "@tanstack/react-form";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import { Button } from "../ui/button";
import { useFormState } from "react-dom";

const todos = [
{
id: 1,
name: "Buy milk",
},
{
id: 2,
name: "Drink water",
},
{
id: 3,
name: "Eat food",
},
{
id: 4,
name: "Go out",
},
];

const TodoList = () => {
const formFactory = createFormFactory({
defaultValues: {
firstName: "Sergiu",
todos: todos,
},
});

const [state, action] = useFormState(() => {}, formFactory.initialFormState);
// ts error here: Argument of type 'Partial<FormState<{ firstName: string; todos: { id: number; name: string; }[]; }>>' is not assignable to parameter of type 'void'.

const { Provider, Field, handleSubmit, Subscribe, useStore } =
formFactory.useForm({
transform: useTransform(
(baseForm: FormApi<any, any>) => mergeForm(baseForm, state),
// ts error here, state: Argument of type 'void' is not assignable to parameter of type 'Partial<FormState>'
[state]
),
onSubmit: async ({ value }) => {
console.log(value);
},
});

return (

<form
action={action as never}
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
void handleSubmit();
}}
>

<Field
name="firstName"
children={(field) => {
return (
<>
First Name:
<Input
id="firstName"
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
className="border rounded"
/>
</>
);
}}
/>

<Field
name="todos"
mode="array"
children={({ state, pushValue, removeValue }) => {
return (
<>

<Button
type="button"
onClick={() => {
pushValue({
id: state.value.length + 1,
name: "",
});
}}
>
Create new board

{state.value.map((board, i) => {
return (

<Field
index={i} // Type 'number' is not assignable to type 'undefined'.
name={name} // Type '"name"' is not assignable to type '"firstName" | "todos" | "todos.name" | "todos.id"'.
children={(field) => {
return (

{field.name}:{" "}

<Input
id={field.name}
name={field.name}
value={field.state.value} // Type 'unknown' is not assignable to type 'string | number | readonly string[] | undefined'.
onBlur={field.handleBlur}
onChange={(e) =>
field.handleChange(e.target.value)
}
className="border rounded"
/>
<Button
type="button"
onClick={() => removeValue(i)}
>
remove

);
}}
/>

);
})}

</>
);
}}
/>

<Subscribe
selector={(state) => [state.canSubmit, state.isSubmitting]}
children={([canSubmit, isSubmittig]) => {
return (

{isSubmittig ? "..." : "Submit"}

);
}}
/>

);
};

export default TodoList;
`

Expected behavior

I expect errors from myself not library.

How often does this bug happen?

Every time

Screenshots or Videos

"use client";
import React from "react";
import {
createFormFactory,
FormApi,
mergeForm,
useTransform,
} from "@tanstack/react-form";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import { Button } from "../ui/button";
import { useFormState } from "react-dom";

const todos = [
{
id: 1,
name: "Buy milk",
},
{
id: 2,
name: "Drink water",
},
{
id: 3,
name: "Eat food",
},
{
id: 4,
name: "Go out",
},
];

const TodoList = () => {
const formFactory = createFormFactory({
defaultValues: {
firstName: "Sergiu",
todos: todos,
},
});

const [state, action] = useFormState(() => {}, formFactory.initialFormState);

const { Provider, Field, handleSubmit, Subscribe, useStore } =
formFactory.useForm({
transform: useTransform(
(baseForm: FormApi<any, any>) => mergeForm(baseForm, state),
[state]
),
onSubmit: async ({ value }) => {
console.log(value);
},
});

return (

<form
action={action as never}
onSubmit={(e) => {
e.preventDefault();
e.stopPropagation();
void handleSubmit();
}}
>

<Field
name="firstName"
children={(field) => {
return (
<>
First Name:
<Input
id="firstName"
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) => field.handleChange(e.target.value)}
className="border rounded"
/>
</>
);
}}
/>

<Field
name="todos"
mode="array"
children={({ state, pushValue, removeValue }) => {
return (
<>

<Button
type="button"
onClick={() => {
pushValue({
id: state.value.length + 1,
name: "",
});
}}
>
Create new board

{state.value.map((board, i) => {
return (

<Field
index={i}
name={name}
children={(field) => {
return (

{field.name}:{" "}

<Input
id={field.name}
name={field.name}
value={field.state.value}
onBlur={field.handleBlur}
onChange={(e) =>
field.handleChange(e.target.value)
}
className="border rounded"
/>
<Button
type="button"
onClick={() => removeValue(i)}
>
remove

);
}}
/>

);
})}

</>
);
}}
/>

<Subscribe
selector={(state) => [state.canSubmit, state.isSubmitting]}
children={([canSubmit, isSubmittig]) => {
return (

{isSubmittig ? "..." : "Submit"}

);
}}
/>

);
};

export default TodoList;

Platform

Next.js 14
MacOS m1

Tanstack Form adapter

react-form

TanStack Form version

0.13.3

TypeScript version

5.3.3

Additional context

No response

[crutchcorn]

Please provide a minimal sandbox and short form explaination. Closing until a repro is provided

[SergiuPlesco]

Sorry for that.
Here is the codesandbox:
https://codesandbox.io/p/devbox/react-form-2n6vht

1. On create new todo there is a react error in console

3. 4. 5.

It is a form to create and remove todos.

[MaxLiebsch]

I'm having the same issue.

[crutchcorn]

@SergiuPlesco your usage is slightly off to start with (you're not isolating down to a specific field of a Todo), but ignoring that there are bugs with the Array typings that are being fixed here:

#588

Keeping closed, since this issue is a bit messy, but we'll have this sorted prior to 1.x.

[MaxLiebsch]

@crutchcorn
Dear, thank you very much for you continous effort to make a great product and it looks promissing.

But I do have to say, that a big banner on the website, that says "The library is still
under constructions" would have been great.

After implementing a big form with over 50 fields with a lot of nested array structures,
I come to know that I will have to redo it in react-hook-form.

But I'm sure 1.0 will be a blast. 🚀