React Typescript Custom Hooks: Property 'prop_name' does not exist on type '{}'

The issue is that the initial state for inputs in CustomHook.ts is {}. Then you are trying to render inputs.subject, inputs.email, inputs.name and inputs.comments. These properties do not exist on the empty object {}, which is what the error messages are telling you.

Let's start with some basics. You have IContact, but you don't know what to do with it. You should be using it to type the data anywhere you expect that signature. To start with, the message callback.

const message = (inputs: IContact) => {
    alert(`Message Sent!
    Subject: ${inputs.subject}
    Sender: ${inputs.email}
    Name: ${inputs.name}
    Comments: ${inputs.comments}`);
};

How about the useContactForm hook? Well, you could, but I don't think I would recommend it. When I look at that hook, I don't see anything inside of it that references IContact. In this case, the hook is more generic.

If only there was some way of adding typing that was more generic...

Well, there is. What we want to do is be able to pass in a type to use as the typing for other objects.

const useContactForm = <T>(callback: (state: T) => void) => {
    //...code
}

Here, I added <T> to the front of the arrow function parameters. I also typed the callback as (value: T) => void to indicate the callback should accept a type of T as a parameter and not return anything.

Now, we need to type the useState function.

const [inputs, setInputs] = useState<T>({});

Uh-oh. {} doesn't match T. We need an initial state of type T. Since T is being passed in, our initial state will need to be as well.

const useContactForm = <T>(callback: (state: T) => void, initialState: T) => {
    const [inputs, setInputs] = useState<T>(initialState);
    // ...code
}

And pass it in.

    const {inputs, handleInputChange, handleSubmit} = useContactForm(message, {
        subject: '',
        email: '',
        name: '',
        comments: '',
    });

Okay. And that's basically how that needs to get handled. However, there are several other issues with the code and use of both TypeScript and Hooks.

1. You need more typings. The event parameters in the event handlers should have types. e.g. ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
2. You are passing a function into setInputs instead of new state.
3. You call the callback in handleSubmit with no arguments, but the message callback is clearly looking for an IContact.
4. You are trying to use hooks in a class component instead of a functional one. You need to change the class component to a function and put the call to your custom hook inside of the function.

Here is some working code.

ContactForm.tsx

import React from 'react';
import './ContactForm.scss';
import useContactForm from './CustomHook';

interface IContact {
    subject: string;
    email: string;
    name: string;
    comments: string;
}

const message = (inputs: IContact) => {
    alert(`Message Sent!
  Subject: ${inputs.subject}
  Sender: ${inputs.email}
  Name: ${inputs.name}
  Comments: ${inputs.comments}`);
};

export default () => {
    const {inputs, handleInputChange, handleSubmit} = useContactForm(message, {
        subject: '',
        email: '',
        name: '',
        comments: '',
    });

    return (
        <div className="contactForm_container">
            <div className="contactForm_inner">
                <form onSubmit={handleSubmit}>
                    <div className="input-group">
                        <label htmlFor="subject">Subject</label>
                        <input
                            id="subject"
                            name="subject"
                            type="text"
                            onChange={handleInputChange}
                            value={inputs.subject}
                            required
                        />
                    </div>
                    <div className="input-group">
                        <label htmlFor="email">Your Email</label>
                        <input
                            id="email"
                            name="email"
                            type="text"
                            onChange={handleInputChange}
                            value={inputs.email}
                            required
                        />
                    </div>
                    <div className="input-group">
                        <label htmlFor="name">Your Name</label>
                        <input
                            id="name"
                            name="name"
                            type="text"
                            onChange={handleInputChange}
                            value={inputs.name}
                            required
                        />
                    </div>
                    <div className="input-group">
                        <label htmlFor="comments">Comments</label>
                        <textarea
                            name="comments"
                            id="comments"
                            rows={10}
                            onChange={handleInputChange}
                            value={inputs.comments}
                            required
                        />
                    </div>
                    <div className="controls">
                        <button type="submit">Send Message</button>
                    </div>
                </form>
            </div>
        </div>
    );
};

CustomHook.ts

import React, {useState, FormEvent, ChangeEvent} from 'react';

/*
This is a Custom React Hook that handles our form submission
*/

const useContactForm = <T>(callback: (state: T) => void, initialState: T) => {
    const [inputs, setInputs] = useState<T>(initialState);

    const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
        if (event) {
            event.preventDefault();
        }
        callback(inputs);
    };
    const handleInputChange = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        event.persist();
        setInputs({
            ...inputs,
            [event.target.name]: event.target.value,
        });
    };
    return {
        handleSubmit,
        handleInputChange,
        inputs,
    };
};

export default useContactForm;