react-hook-form axios post - unable to create payload

user_14450853 0
Viewed 2383

I am using react-hook-form, axios and functional components to post some data from browser input form into a database. However I just do not know the basic method of how to get axios.post to recognize the "inputted form data". The form is fully working and I can input data and can see the valid object in browser console. But my request payload is just {}.

The API endpoint is also tested via postman. I have also validated backend is fine, as I successfully test posted the json object (from postman testing code snippet) directly from my React script. It is just that I do not know how to put the form input data into axios.post. Failed to find an easy answer despite hours on google and youtube! So please help!

Apologies, but I am an absolute newbie to programming and this is my first post! So I am unlikely to understand technical answers and request you to be kind enough to type in the code changes, if you are able to. My code is below.

import React from "react";
import {useForm} from "react-hook-form";
import axios from "axios";

function Eirform() {
    const { register, handleSubmit, formState: { errors } } = useForm();
    const onSubmit = (data) => console.log(data);

    axios
        .post('http://localhost:8000/tran', {onSubmit},
            {headers: {'Content-Type': 'application/json',
            },
        })
        .then(response => {console.log(response.data)})
        .catch(error => {console.log(error.data)});

    return (
        <div>
            <h1>My Input Form</h1>
            <form onSubmit={handleSubmit(onSubmit)}>
                <input type="text" placeholder="Tran #" {...register("trn_no",{required: true})}/>
                <input type="date" placeholder="Purchase date" {...register("pur_date",{required: "Required"})}/>
                <input type="date" placeholder="Maturity date" {...register("mat_date",{required: "Required"})}/>
                <input type="text" placeholder="Purchase Price" {...register("pur_pr",{required: "Required"})}/>
                <input type="number" placeholder="Purchase Cost" {...register("pur_cost",{required: "Required"})}/>
                <input type="text" placeholder="Coupon rate" {...register("cpn_rate",{required: "Required"})}/>
                <input type="submit"/>
            </form>

        </div>

    )
}
export {Eirform}

browser console image

react-functional-component axios react-hook-form react-hooks json
1 Answers

You need to put your axios post within the submit function itself, so it executes at that time. The way you have it at the moment, it will fire on every render and will lose the data context, which is why you're seeing an empty object.

import React from "react";
import {useForm} from "react-hook-form";
import axios from "axios";

function Eirform() {
    const { register, handleSubmit, formState: { errors } } = useForm();

    const onSubmit = data => {
       axios
        .post(
            'http://localhost:8000/tran',
            data,
            { headers: { 'Content-Type': 'application/json' }}
         )
        .then(response => {console.log(response.data)})
        .catch(error => {console.log(error.data)});
    };

    return (
        <div>
            <h1>My Input Form</h1>
            <form onSubmit={handleSubmit(onSubmit)}>
                ...
            </form>
        </div>
    )
}
export {Eirform}
user_9055710
Related