I have noticed that most online examples of handling change events only pass in the event parameter, making the value accessible automatically. However, I encountered an error stating that the value is not found when trying to use it in my handleChange function. I am attempting to implement form validation using Formik. How can I incorporate the value in the handleChange function?
export default function MyPage() {
const [isSubmitted, setIsSubmitted] = useState(false);
const [isRemoved, setIsRemoved] = useState(false);
const [removeUser] = useMutation<Response>(USER);
let submitForm = (email: string) => {
User({
variables: {
email: email,
},
})
.then(({ data }: ExecutionResult<Response>) => {
if (data !== null && data !== undefined) {
setIsRemoved(true);
}
}) };
const formik = useFormik({
initialValues:{ email: '' },
onSubmit:(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
},
validationSchema:schema
})
const handleChange = (e: ChangeEvent<HTMLInputElement>)=>{
if (name!== null) && (value!==null){
const {name,value} = event.target;
formik.setFieldValue(name,value);
}
}
return (
<div>
<Form
onSubmit={e => {
e.preventDefault();
submitForm(formik.values.email);
}}>
<div>
<TextField
variant="outlined"
margin="normal"
id="email"
name="email"
helperText={formik.touched.email ? formik.errors.email : ''}
error={formik.touched.email && Boolean(formik.errors.email)}
label="Email"
value={formik.values.email}
//onChange={change.bind(null, 'email')}
onChange={handleChange}
/>
<CustomButton
disabled={!isValid || !formik.values.email}
text={'Remove User'}
/>
</div>
</Form>
</div>
);
}
When referencing this line:
const {name,value} = event.target;
I encounter the following error message despite having a conditional check using an if statement:
Property 'name' does not exist on type 'EventTarget | null'.ts(2339)