I know there are different ways of declaring a function (or expressing it), however, I haven’t seen/used anything like this before (given, I am a “newbie” in the field). Can someone, please, explain how this particular function declaration works and when it is used? Can’t wrap my head around that “:” following function name!
const formSubmitHandler: SubmitHandler<IFormInputs> = () => {}
(Not sure if it has anything to do with typescript)
import './App.css';
import { useForm, SubmitHandler } from 'react-hook-form'
type IFormInputs = {
email: string,
password: string
}
const formSubmitHandler: SubmitHandler<IFormInputs> = (data: IFormInputs) => {
console.log('the form data is', data);
}
const App = () => {
const { register, handleSubmit, watch, formState: {errors}} = useForm<IFormInputs>()
console.log(errors, 'this is an error explanation');
console.log(watch('email'), 'watch the email variable');
return (
<div style={{padding: '2rem', border: '1px black solid'}}>
<form onSubmit={handleSubmit(formSubmitHandler)}>
<input defaultValue='[email protected]' {...register('email')}/>
<br />
{errors.password && <span>This field is required</span>}
<br />
<input {...register('password', { required: true })}/>
<br />
<br />
<input type="submit" />
</form>
</div>
)
}
export default App;
