Bug when removing element from useFieldArray

[nikgun1984]

I am experiencing this bug for a while. I do not know what causes this. It works fine with creating form without default values. But once i add default values to form and try to remove box, the last input gets removed instead of 1st input.

const EditForm: React.FC<IEditSet> = ({id, action, onSubmit}) => {
	const classes = useStyles();
	const studysets = useSelector((state: RootStore) => state.studysets.studysets);
	const set = studysets?.filter(el=>+el.id === +id)[0];
	const { register, watch,control,handleSubmit, formState: { errors }, reset } = useForm<IStudySetResponse>({mode: "onChange",reValidateMode: "onChange",resolver: yupResolver(studySetSchema),defaultValues: {
		id: id,
		title: '',
		description:'',
		username: '',
		cards: [...set?set.cards:[]]
	}});
    const {fields,append,remove} = useFieldArray({
		control,
		name: 'cards',
	})
	const addCard = (e:React.SyntheticEvent): void => {
		e.preventDefault();
		append({})
	};
         // This function will be passed as prop to the component
	const removeCard = (idx:number) => {
		// await QuizmeApi.removeFlashcard(fieldID)
		// 	.then((data) => {
		// 		console.log(data)
		// 		if(data) setIsDeleted(`Flashcard has been deleted...`);
		// 	})
		// 	.catch((err) => {
		// 		console.log(err)
		// 	});
		remove(idx);
	}

	useEffect(()=>{
		if(set){
			reset(set)
		}
  	},[set]);

	return (
			<form className="mt4" onSubmit={handleSubmit(onSubmit)} >
				<Box m={5}>
				<Grid item container direction="column">
						<Grid item xs={12} container>
						<Grid item xs={6} lg={3}>
							<h6><b>{action}</b></h6> 
						</Grid>
						<Grid item lg={6}/>
						<Grid item xs={6} lg={3}>
							<button className="waves-effect waves-light btn purple darken-1" type="submit"><i className="material-icons left">app_registration</i>Create</button>
						</Grid>
					</Grid>
				</Grid>
				</Box>
				<Grid container spacing={2} direction="column">
					<Grid item xs={12} lg={12}>			
						<div className="input-field">
							<input id="title" {...register("title")} type="text" className="validate" placeholder="Enter your title in here..."  />
							<label htmlFor="title" className="active">TITLE</label>
							{errors.title && <span className="helper-text red-text left-align">{errors.title.message}</span>}
						</div>
					</Grid>
					<Grid item xs={12} lg={12}>
						<div className="input-field">
							<input id="description" {...register("description")} type="text" className="validate" placeholder="Add a description"/>
							<label htmlFor="description" className="active">DESCRIPTION</label>
							{errors.description && <span className="helper-text red-text left-align">{errors.description.message}</span>}
						</div>
					</Grid>
					{errors.cards && <span className="helper-text red-text">{(errors.cards as any).message}</span>}
					{   
						fields.map((field,idx)=>{
						const watchFields = watch([`cards.${idx}.term`, `cards.${idx}.definition`]);
						return (
							<div key={field.id} className={classes.boxBorder}>
								<FlashCardForm control={control} idx={idx} errors={errors} watchFields={watchFields} remove={removeCard} card={set?.cards[idx]} fieldID={field.id}/>
							</div>
						)
					})
					}
					<div className={classes.boxBorder}>
						<div className={classes.space}>
							<Grid item container spacing={4} justify="center">
								<Grid item xs={12} lg={3}>
									<div className={`${classes.paper} input-field`}>
										<button className="btn waves-effect waves-light purple darken-1" onClick={(e)=>addCard(e)}>Add Card<i className="material-icons left">add_box</i></button>
									</div>
								</Grid>
							</Grid>
						</div>
					</div>
				</Grid>
			</form>
	)
}

[bluebill1049]

can you try to reproduce this in a codesandbox?

[thanh-nguyen-95]

// new 'set' is created every time the EditForm renders
const set = studysets?.filter(el=>+el.id === +id)[0];

useEffect(() => {
  if (set) {
    // this runs when set is changed, which happens everytime EditForm renders
    reset(set);
  }
}, [set]);

This could be the cause of your problem. Still waiting for your CodeSandbox to confirm.

[nikgun1984]

I will recreate it tomorrow. I needed this setup because after 1st render i am getting undefined in useSelector. I could not figure it out how to make this work without using useEffect. I am very new to React Form Hook and decided to implement it in my new project.

[thanh-nguyen-95]

Assuming useSelector is some sort of global state management hook, you can try using the studysets directly as a dependency of useEffect.

useEffect(() => {
  const set = studysets?.find(el => +el.id === +id) // using Array.find works the same and cleaner

  if (set) {
    reset(set)
  }
}, [studysets, reset, id])

[nikgun1984]

You are the man!!! That solved my issue. Thank you. so much!!! Extra points for find method, for some reason i forgot about find method :))

[bluebill1049]

Awesome! thanks @thanh-nguyen-95