React Hook Form: How to Preserve User Inputs When Field Array is Re-initialized?
Unanswered
Spectacled bear posted this in #help-forum
Spectacled bearOP
I'm working on a product variations list using react-hook-form in React, and I'm facing a challenge with preserving user inputs when the field array is re-initialized. Here’s the setup:Form Structure:Users can add variants (e.g., size, color).Based on these variants, a list of variations is generated.Issue:I'm using useFieldArray for the variants.Variations are generated dynamically based on the variants using useEffect.When new variants are added, the field array is re-initialized, causing the loss of user input in the variations list.
How can I ensure that the user input in the variations list is preserved when the variants array changes and the field array gets re-initialized? Are there any best practices or alternative approaches to handle this scenario in react-hook-form?
How can I ensure that the user input in the variations list is preserved when the variants array changes and the field array gets re-initialized? Are there any best practices or alternative approaches to handle this scenario in react-hook-form?
5 Replies
Spectacled bearOP
For example user variants list is this
One of those generated variations is this
Red-xl-soft
And user modify price of this variation.
After that here removed xl from the sizes
The variations will generated again but the
Red-soft input will reset.
What should I do to Preserve something like that?
Color =['red' ]
Size=['xl',... ]
Type=['soft',... ]One of those generated variations is this
Red-xl-soft
And user modify price of this variation.
After that here removed xl from the sizes
The variations will generated again but the
Red-soft input will reset.
What should I do to Preserve something like that?
Well i have done something similar to this a while ago(i was still new):
1) Created a custom input called TagInput, its not connected to a field array. Basically when the user presses "," key, i just add whatever input the user entered into a react state array:
1) Created a custom input called TagInput, its not connected to a field array. Basically when the user presses "," key, i just add whatever input the user entered into a react state array:
const [tags, setTags] = useState<string[]>([]);
function handleKeyEvent(event: React.KeyboardEvent<HTMLInputElement>): void {
if (event.key === ",") {
event.preventDefault();
const val = value.trim();
if (val) {
if (!tags.includes(val)) {
setTags([...tags, val]);
}
setValue("");
}
}
}You can essentially have a dynamic number of these and map them with the field's key: for example "name" key, "size" key.
At the end you can basically take a cartesian product from those arrays to generate a combination.
At the end you can basically take a cartesian product from those arrays to generate a combination.
Input
Output:
Then you just generate whatever form element you want from this
"color": ["red", "blue"]
"size": ["xl"]Output:
["red-xl", "blue-xl"]Then you just generate whatever form element you want from this
Spectacled bearOP
I did something similar to this yeah, thanks a lot.