0

I made a simple form that has different fields and it will only take the ones with a value to update certain values in the database. My plan is to use unregister to remove those fields that were first registered then backspaced. I did it first in a codesandbox found in https://codesandbox.io/s/react-hook-form-unregister-v6-forked-nmv9oe?file=/src/index.js

Why doesn't it work in mine? I don't think it's affected by other codes. If there is like a behavioral difference, is there any other way to do it? I've tried with states but still doesn't work. Just to be sure here's my code

<form className='bg-white px-8 py-8 w-screen' onSubmit={handleSubmit(formSubmit)}>
    <h1 className='text-2xl font-medium mb-8 text-center'>EDIT ACCOUNT INFO</h1>
    <div className="grid grid-cols-1 grid-flow-row gap-4">
        {formInputData.map(({title, inputName, type, icon, maxLength}, index)=> (
            <div className="flex flex-col" key={index}>
                <label className='text-xl'>{title}</label>
                {errors[inputName] && <p className='text-red-600 text-sm my-1'>{errors[inputName].message}</p>}
                <div className="flex justify-center items-center border-2 border-solid border-black/50">
                    <input className="w-full px-4 py-2" type={!type ? typeisPassword[inputName] ? `password` : `text` : type} onChange={(e)=>checkInputValue(inputName, e.currentTarget.value)}/>
                {icon && <FontAwesomeIcon className="text-2xl mx-4" icon={faEye} onClick={()=>setTypeIsPassword({...typeisPassword, [inputName]: !typeisPassword[inputName]})}/>}
                </div>
            </div>
        ))}
    </div>
    <div className="grid grid-cols-2 grid-flow-row gap-6 mt-6">
        <button className='bg-amber-200 hover:bg-amber-300 transition-color duration-300 ease-in-out py-4' onClick={()=>formClose()}>Close</button>
        <button className='bg-amber-200 hover:bg-amber-300 transition-color duration-300 ease-in-out py-4' type="submit">Submit</button>
    </div>
</form>

)

0 Answers0