useFieldArray sandbox diff
3 removals
| Lines | |
|---|---|
| Total | 144 |
| Removed | -2.1%3 |
| Words | |
| Total | 280 |
| Removed | -1.8%5 |
144 lines
3 additions
| Lines | |
|---|---|
| Total | 144 |
| Added | +2.1%3 |
| Words | |
| Total | 278 |
| Added | +1.1%3 |
144 lines
import React from "react";
import React from "react";
import { useForm, useFieldArray, Controller, useWatch } from "react-hook-form";
import { useForm, useFieldArray, Controller } from "react-hook-form";
import ReactDOM from "react-dom";
import ReactDOM from "react-dom";
import "./styles.css";
import "./styles.css";
let renderCount = 0;
let renderCount = 0;
function App() {
function App() {
const { register, control, handleSubmit, reset, watch } = useForm({
const { register, control, handleSubmit, reset } = useForm({
defaultValues: {
defaultValues: {
test: [{ firstName: "Bill", lastName: "Luo" }]
test: [{ firstName: "Bill", lastName: "Luo" }]
}
}
});
});
const {
const {
fields,
fields,
append,
append,
prepend,
prepend,
remove,
remove,
swap,
swap,
move,
move,
insert,
insert,
replace
replace
} = useFieldArray({
} = useFieldArray({
control,
control,
name: "test"
name: "test"
});
});
const onSubmit = (data) => console.log("data", data);
const onSubmit = (data) => console.log("data", data);
// if you want to control your fields with watch
// if you want to control your fields with watch
// const watchResult = watch("test");
// const watchResult = watch("test");
// console.log(watchResult);
// console.log(watchResult);
// The following is useWatch example
// The following is useWatch example
// console.log(useWatch({ name: "test", control }));
// console.log(useWatch({ name: "test", control }));
renderCount++;
renderCount++;
return (
return (
<form onSubmit={handleSubmit(onSubmit)}>
<form onSubmit={handleSubmit(onSubmit)}>
<h1>Field Array </h1>
<h1>Field Array </h1>
<p>The following demo allow you to delete, append, prepend items</p>
<p>The following demo allow you to delete, append, prepend items</p>
<span className="counter">Render Count: {renderCount}</span>
<span className="counter">Render Count: {renderCount}</span>
<ul>
<ul>
{fields.map((item, index) => {
{fields.map((item, index) => {
return (
return (
<li key={item.id}>
<li key={item?.id}>
<input {...register(`test.${index}.firstName`)} />
<input {...register(`test.${index}.firstName`)} />
<Controller
<Controller
render={({ field }) => <input {...field} />}
render={({ field }) => <input {...field} />}
name={`test.${index}.lastName`}
name={`test.${index}.lastName`}
control={control}
control={control}
/>
/>
<button type="button" onClick={() => remove(index)}>
<button type="button" onClick={() => remove(index)}>
Delete
Delete
</button>
</button>
</li>
</li>
);
);
})}
})}
</ul>
</ul>
<section>
<section>
<button
<button
type="button"
type="button"
onClick={() => {
onClick={() => {
append({ firstName: "appendBill", lastName: "appendLuo" });
append({ firstName: "appendBill", lastName: "appendLuo" });
}}
}}
>
>
append
append
</button>
</button>
<button
<button
type="button"
type="button"
onClick={() =>
onClick={() =>
prepend({
prepend({
firstName: "prependFirstName",
firstName: "prependFirstName",
lastName: "prependLastName"
lastName: "prependLastName"
})
})
}
}
>
>
prepend
prepend
</button>
</button>
<button
<button
type="button"
type="button"
onClick={() =>
onClick={() =>
insert(parseInt(2, 10), {
insert(parseInt(2, 10), {
firstName: "insertFirstName",
firstName: "insertFirstName",
lastName: "insertLastName"
lastName: "insertLastName"
})
})
}
}
>
>
insert at
insert at
</button>
</button>
<button type="button" onClick={() => swap(1, 2)}>
<button type="button" onClick={() => swap(1, 2)}>
swap
swap
</button>
</button>
<button type="button" onClick={() => move(1, 2)}>
<button type="button" onClick={() => move(1, 2)}>
move
move
</button>
</button>
<button
<button
type="button"
type="button"
onClick={() =>
onClick={() =>
replace([
replace([
{
{
firstName: "test1",
firstName: "test1",
lastName: "test1"
lastName: "test1"
},
},
{
{
firstName: "test2",
firstName: "test2",
lastName: "test2"
lastName: "test2"
}
}
])
])
}
}
>
>
replace
replace
</button>
</button>
<button type="button" onClick={() => remove(1)}>
<button type="button" onClick={() => remove(1)}>
remove at
remove at
</button>
</button>
<button
<button
type="button"
type="button"
onClick={() =>
onClick={() =>
reset({
reset({
test: [{ firstName: "Bill", lastName: "Luo" }]
test: [{ firstName: "Bill", lastName: "Luo" }]
})
})
}
}
>
>
reset
reset
</button>
</button>
</section>
</section>
<input type="submit" />
<input type="submit" />
</form>
</form>
);
);
}
}
const rootElement = document.getElementById("root");
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
ReactDOM.render(<App />, rootElement);