Controller is missing defaultValue
prop when using useFieldArray
#4193
-
Hi, I'm getting warnings when using Consider the basic example below: https://codesandbox.io/s/thirsty-bardeen-jn6iy?fontsize=14&hidenavigation=1&theme=dark import { TextField } from "@material-ui/core";
import { Controller, useFieldArray, useForm } from "react-hook-form";
import "./styles.css";
export default function App() {
const { control } = useForm({
defaultValues: {
labels: [{ text: "Lorem" }, { text: "Ipsum" }, { text: "Dolor" }]
}
});
const { fields } = useFieldArray({
name: "labels",
control
});
return (
<div className="App">
<h1>
Warnings with <code>useFieldArray</code>
</h1>
{fields.map((item, index) => (
<Controller
key={item.id}
name={`labels[${index}].text`}
control={control}
render={({ value, ref, onChange, onBlur }) => (
<TextField
label="Title"
variant="filled"
margin="dense"
value={value}
inputRef={ref}
onChange={onChange}
onBlur={onBlur}
fullWidth
/>
)}
/>
))}
</div>
);
} When the form is opening, I can see 3 text fields containing 3 default values (respectively
So when I add a Do you have an idea about what am I supposed to do to get my text fields set up with their default values without getting these warnings? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
Beta Was this translation helpful? Give feedback.
defaultValue={field.text}
will set the correct default value for the input.