Post request with React Hooks, Typescript and Axios

Question

Im trying to create a basic subscription component where an user just fills an email and subscribes to a service. So far i cant input my data. Trying to get used with React with Hooks and Typescript, just the last one is getting in my way :D I Handle Input:

const handleEmail = (e: React.ChangeEvent<HTMLInputElement>): void => {
        const { name, value } = e.target;
        

        setData({...data, [name]: value})
    }

I have the post function

const postEmail = (e: React.ChangeEvent<HTMLInputElement>): void => {
        e.preventDefault()

        let obj = {
            email: data.email
        };
        setLoading(true)
        setSubmitted(false);
        postGeneralSub.postGeneralSub(obj).then(response => {
            setData({
                email: response.data.email
            })
            setLoading(false)
            setSubmitted(true);
            console.log(response.data);

        }).catch(e => {
            console.log(e);
        });

(e want to send "email":"blablabla")

And the form

<div>
            <GeneralCountryForm
            label="Insert Email"
            onChange={handleEmail}
            value={data.email}
            submit={postEmail}
            />
            <Button>Submit data</Button>
        </div>

With the child component GeneralCountryForm:

type GeneralSubProps = {
    label: string;
    onChange: any;
    value: string;
    submit: any
  }
export const GeneralCountryForm: FunctionComponent<GeneralSubProps> = ({ label, onChange, value, submit }) => 
    <form onSubmit={submit}>
      <label>{label}</label>
      <input type="text" value={value} onChange={onChange} />
    </form>

Any tip on what im doing wrong and how i can improve this logic / error handling ?

tar · Accepted Answer · 2020-10-31 20:22:29Z

Well the button doesn't seem to be connected to the form at all, so the form has no way of being submitted, and when the button is clicked there is no handler. I'd either move the submit handler to the button and fetch the input values with useRef, or move the button into the form.

Other than that, a couple things:

it's not typical to define a function type as void (like postEmail() is) except when defining a type/interface - just omit the type unless it's interesting
you can probably get rid of one of the duplicate states (loading and submitted)
you're using semicolons on some statements and not on others - be consistent
use async/await and try/catch instead of .then() and .catch(), e.g when you call postGeneralSub.postGeneralSub(obj).then(...
I'm not sure why your handleEmail() function is so dynamic with regard to name - if you know you're setting the email, why not just set the email field instead of using [name]
never use any if you can avoid it - and you can definitely avoid it in this code
start using a linter like prettier

Collectives™ on Stack Overflow

Post request with React Hooks, Typescript and Axios

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related