I have a basic form where the code for it is using react-hook-form
and looks like:
<code>import "./styles.css";
import { useForm, useFieldArray, Control, Controller } from 'react-hook-form';
import { useState } from 'react';
const defaultValues = {
"foo": [
{
"bar": [0, 0, 0]
},
{
"bar": [4, 5, 6]
}
]
}
const FooComponent = ({fooIndex, control}) => {
const { fields, append, remove } = useFieldArray({
control,
name: `foo.${fooIndex}.bar`,
keyName: 'id'
});
return (
<div>
<h1>Foo</h1>
{fields.map((field, index) => (
<Controller
key={field.id}
name={`foo.${fooIndex}.bar.${index}`}
control={control}
defaultValue={String(field.value)} // Convert to string
render={({field}) => (
<input {...field} value={String(field.value)} /> // Ensure the value is a string
)}
/>
))}
</div>
)
};
export default function App() {
const { control, handleSubmit, getValues } = useForm({
defaultValues
});
const [formValue, setFormValue] = useState(null);
const { fields, append, remove } = useFieldArray({
control,
name: 'foo',
keyName: 'id'
});
const onSubmit = async () => {
};
const handlePrintForm = () => {
setFormValue(getValues())
};
return (
<div className="App">
<div>
<h1>Form value:</h1>
<p>{JSON.stringify(formValue, null, 2)}</p>
</div>
<form onSubmit={handleSubmit(onSubmit)}>
{fields.map((field, index) => (
<div key={field.id}>
<FooComponent fooIndex={index} control={control}/>
</div>
))}
<button onClick={(()=>append({'bar': [1, 2, 3]}))}>Add Foo</button>
</form>
<button onClick={handlePrintForm}>Print form</button>
</div>
);
}
</code>
<code>import "./styles.css";
import { useForm, useFieldArray, Control, Controller } from 'react-hook-form';
import { useState } from 'react';
const defaultValues = {
"foo": [
{
"bar": [0, 0, 0]
},
{
"bar": [4, 5, 6]
}
]
}
const FooComponent = ({fooIndex, control}) => {
const { fields, append, remove } = useFieldArray({
control,
name: `foo.${fooIndex}.bar`,
keyName: 'id'
});
return (
<div>
<h1>Foo</h1>
{fields.map((field, index) => (
<Controller
key={field.id}
name={`foo.${fooIndex}.bar.${index}`}
control={control}
defaultValue={String(field.value)} // Convert to string
render={({field}) => (
<input {...field} value={String(field.value)} /> // Ensure the value is a string
)}
/>
))}
</div>
)
};
export default function App() {
const { control, handleSubmit, getValues } = useForm({
defaultValues
});
const [formValue, setFormValue] = useState(null);
const { fields, append, remove } = useFieldArray({
control,
name: 'foo',
keyName: 'id'
});
const onSubmit = async () => {
};
const handlePrintForm = () => {
setFormValue(getValues())
};
return (
<div className="App">
<div>
<h1>Form value:</h1>
<p>{JSON.stringify(formValue, null, 2)}</p>
</div>
<form onSubmit={handleSubmit(onSubmit)}>
{fields.map((field, index) => (
<div key={field.id}>
<FooComponent fooIndex={index} control={control}/>
</div>
))}
<button onClick={(()=>append({'bar': [1, 2, 3]}))}>Add Foo</button>
</form>
<button onClick={handlePrintForm}>Print form</button>
</div>
);
}
</code>
import "./styles.css";
import { useForm, useFieldArray, Control, Controller } from 'react-hook-form';
import { useState } from 'react';
const defaultValues = {
"foo": [
{
"bar": [0, 0, 0]
},
{
"bar": [4, 5, 6]
}
]
}
const FooComponent = ({fooIndex, control}) => {
const { fields, append, remove } = useFieldArray({
control,
name: `foo.${fooIndex}.bar`,
keyName: 'id'
});
return (
<div>
<h1>Foo</h1>
{fields.map((field, index) => (
<Controller
key={field.id}
name={`foo.${fooIndex}.bar.${index}`}
control={control}
defaultValue={String(field.value)} // Convert to string
render={({field}) => (
<input {...field} value={String(field.value)} /> // Ensure the value is a string
)}
/>
))}
</div>
)
};
export default function App() {
const { control, handleSubmit, getValues } = useForm({
defaultValues
});
const [formValue, setFormValue] = useState(null);
const { fields, append, remove } = useFieldArray({
control,
name: 'foo',
keyName: 'id'
});
const onSubmit = async () => {
};
const handlePrintForm = () => {
setFormValue(getValues())
};
return (
<div className="App">
<div>
<h1>Form value:</h1>
<p>{JSON.stringify(formValue, null, 2)}</p>
</div>
<form onSubmit={handleSubmit(onSubmit)}>
{fields.map((field, index) => (
<div key={field.id}>
<FooComponent fooIndex={index} control={control}/>
</div>
))}
<button onClick={(()=>append({'bar': [1, 2, 3]}))}>Add Foo</button>
</form>
<button onClick={handlePrintForm}>Print form</button>
</div>
);
}
When there is an array with zero-values in it, the form displays the number of zeros in the array, fewer than it should. For instance, with an array of all zeros nothing gets shown:
Whereas an array with [0, 1, 2]
:
How can I fix this?
codesandbox link