Error when passing json object from react frontend to rails api

Question

I'm trying to send my form data to rails api from my react frontend but this happens

This is my react code to handle form data

constructor(props) {
  super(props);
  this.user= {};
  this.state = this.getInitialState();
}

getInitialState = () => {
     const initialState = {
       email: "",
       password: ""
     };
     return initialState;
 }

change = e => {
  this.setState({
    [e.target.name]: e.target.value
  });
};

onSubmit = (e) => {
  e.preventDefault();
  this.user = JSON.stringify(this.state)
  this.user = "{\"user\":" + this.user + "}"
  console.log(this.user);
  fetch('http://localhost:3001/v1/users', {
    method: 'POST',
    body: this.user
  }).then(function(response) {
    console.log(response.json());
  })

  this.setState(this.getInitialState());
}

This code gives the following string in console:

{"user":{"email":"[email protected]","password":"password123."}}

Rails:

class V1::UsersController < ApplicationController

def create

@user = User.new(user_params)

if @user.save
  render :create
else
  head(:unprocessable_entity)
 end
end
private

 def user_params
  params.require(:user).permit(:email, :password, :password_confirmation)
 end
end

Doing the same on PAW gives positive results

PAW

Please help. I've been trying to fix this for 2 days now.

Thank you in advance.

Judging from your error message,I think your rails don't receive your json data from the frontend.So try add "p params[:user]" to check date. — Root
– Root, Commented Oct 29, 2018 at 7:57

Root · Accepted Answer · 2018-10-29 08:37:05Z

0

The problem is here

this.user = "{\"user\":" + this.user + "}"

It just look like json,but it's actually a string.You could use typeof to check it.

console.log(typeof this.user) //string

There are many options to solve this problem.Here is an example.

const users = {
  user: user
}
console.log(users)
const user_json = JSON.parse(JSON.stringify(users))
console.log(typeof user_json)

answered Oct 29, 2018 at 8:37

Root

2,3611 gold badge13 silver badges14 bronze badges

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

1 Comment

Kshitij Sinha Over a year ago

Well this didn't quite work but this did. const data = JSON.stringify({user: this.state}) But thanks for pointing out that data type. completely missed that

Collectives™ on Stack Overflow

Error when passing json object from react frontend to rails api

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related