How to send form data as json in React?

Question

I am trying to build a React front end on top of a Rails API and I am currently working on the registration form on React. Below is my attempt at handling the form submission.

 const handleSubmit = (evt) => {
    evt.preventDefault()
    fetch(`http://localhost:3001/users`, {
      method: "POST",
      headers: {
        "Accept": "application/json"
      },
      body: JSON.parse(JSON.stringify({
        email,
        password,
        first_name,
        last_name,
        phone_number
      }))
    })
      .then(resp => console.log(resp.json))

    setFirst("")
    setLast("")
    setEmail("")
    setPassword("")
    setPhone("")
  }

However, when I print out the params received from React, it is empty. Below is my Rails User create method.

def create
            @user = User.new(user_params)
            puts user_params
        if @user.save
                render json: @user.id, status: :created
                UserMailer.welcome_email(@user).deliver_now
            else
                render json: {errors: @user.errors.full_messages}, status: :unprocessable_entity
            end
        end

        def destroy
            @user.destroy
        end

I checked here and here and a bunch of other places but they say pretty much the same thing. Wrap the body in JSON.stringify or JSON.parse or both. But it isn't working for me.

adel · Accepted Answer · 2020-06-07 17:43:39Z

1

use axios and qs stringifier:

npm i axios qs

then:

import axios from "axios";
import qs from "qs";

axios.post(url,qs.stringify(your body))

answered Jun 7, 2020 at 17:43

adel

3,5051 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Beulah Akindele Over a year ago

So I should scrap the entire fetch?

adel Over a year ago

yep axios is commonly used with react, easy to implement and understand.

Beulah Akindele Over a year ago

Is there a reason why my method wasn't working? I was kinda following a tutorial.

adel Over a year ago

did you try JSON.stringify only without JSON.parse

Collectives™ on Stack Overflow

How to send form data as json in React?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related