Custom hooks to handle the value change in form inputs.

use-form.ts

import React from 'react';

type Props = {
    title?: string;
};

type TReturn = [Props, (event: React.FormEvent<HTMLInputElement>) => void];

const useForm = (initialVal: Props): TReturn => {
    const [formData, setFormData] = React.useState(initialVal || {});

    const handleInput = (event: React.FormEvent<HTMLInputElement>) => {
        setFormData({
            ...formData,
            [event.currentTarget.name]: event.currentTarget.value,
        });
    };

    return [formData, handleInput];
};

export default useForm;
  
  
  // Snippet component
  
    const initialVal = { title: '' };
    const [formData, handleInput] = useForm(initialVal);
  
     <form onSubmit={onFormSubmit} autoComplete='off'>
                        <input
                            type='text'
                            name='title'
                            id='title'
                            placeholder='Type snippet title..'
                            value={formData.title}
                            onChange={handleInput}
                            required={true}
                        />
                    </form>