React form submit is creating phantom parameters

Question

I have a basic registration form in a React front end app, that sends the input parameters to a rails-api backend.

The function to do so looks like this:

handleSubmit(event) {
        event.preventDefault();

        Axios.post('http://localhost:3001/auth/', {
                'password': 'password',
                'password_confirmation': 'password',
                'email': 'asdf@asdf',
                'first_name': 'asdfasdf',
                'last_name': 'wefawa',
                'handle': 'awfewwe'
        })
        .then(function (response) {
          alert(response);
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    }

When I send this though, the params on the rails-api backend somehow include a second copy of each parameter, nested under the key "registrations" The full text, copied from console logs:

"Started POST "/auth/" for ::1 at 2018-01-12 00:36:07 -0500 Processing by Overrides::RegistrationsController#create as HTML Parameters: {"password"=>"[FILTERED]", "password_confirmation"=>"[FILTERED]", "email"=>"asdf@asdf", "first_name"=>"asdfasdf", "last_name"=>"wefawa", "handle"=>"awfewwe", "registration"=>{"password"=>"[FILTERED]", "password_confirmation"=>"[FILTERED]", "email"=>"asdf@asdf", "first_name"=>"asdfasdf", "last_name"=>"wefawa", "handle"=>"awfewwe"}}"

Any idea where that registration tag is coming from?

I realize this is a rather specific question, but any help is much appreciated. Thanks!

0.17.1, although I think I had some syntax error in the above, and I managed to solve it. I'm going to post my solution below — Nathan Lauer

Nathan Lauer Nathan Lauer · Accepted Answer · 2018-01-12T05:56:53

My Own Answer

I had to rearrange the syntax somewhat, but the following worked:

handleSubmit(event) {
        event.preventDefault();

        Axios.request({
            url: 'http://localhost:3001/auth/',
            method: 'post',
            params: {
                'password': 'password',
                'password_confirmation': 'password',
                'email': '[email protected]',
                'first_name': 'asdfasdf',
                'last_name': 'wefawa',
                'handle': '@notusedyet2'
            },
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });
    }

React form submit is creating phantom parameters

1 Answers