How to fix issue while passing ReactJS state data in post request using axios?

Question

I am getting an issue with using Axios . So, here I want to figure out what I am doing wrong with the Axios method.

React State Data

This is my data object I am passing as post data.

const data = qs.stringify({
            recipe_name: inputs.recipe_name,
            total_serve: inputs.total_serve,
            ingrediants: ingrediants,
            directions: directions
        });

Axios

axios.post(
                'http://example.com/api/add', 
                { data },
                { headers: { 'content-type': 'application/x-www-form-urlencoded' }}
            )
            .then(response => {
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });

Response: I have printed the post data on server side. Here is the problem the post data is not getting as expectation at server.

Array
(
    [{"data":"recipe_name] => Poha
    [total_serve] => 10
    [ingrediants] => Array
        (
            [0] => Array
                (
                    [name] => Ing 1
                    [measure] => 5
                )

        )

    [directions] => Array
        (
            [0] => Array
                (
                    [title] => Direction 1
                    [description] => abc Test Hello test"}
                )

        )

)

Starting like this

[{"data":"recipe_name] => Poha

and ending like this

[description] => abc Test Hello test"}

I am expecting result like below:

Array
(
    [recipe_name] => Poha
    [total_serve] => 10
    [ingrediants] => Array
        (
            [0] => Array
                (
                    [name] => Ing 1
                    [measure] => 5
                )

        )

    [directions] => Array
        (
            [0] => Array
                (
                    [title] => Direction 1
                    [description] => abc test Hello Test
                )

        )

)

I want to figure out what I am doing wrong with the Axios method.

Answer 1

I assume your problem is here

const data = qs.stringify({
   recipe_name: inputs.recipe_name,
   total_serve: inputs.total_serve,
   ingrediants: ingrediants,
   directions: directions
});

You do not need to convert your data to string

Try to send raw object

const data = {
   recipe_name: inputs.recipe_name,
   total_serve: inputs.total_serve,
   ingrediants: ingrediants,
   directions: directions
};