Rails - POST request: Error 500 (Internal Server Error) - reactjs

Question

I'm a beginner coder and I'm trying to create an application using React as my front end and Ruby on Rails for my back end. Anytime I press the sign up button and send the request to server I'm receiving an error and I cannot figure out what it is. Help!
Console:
SignUp.js:17
POST http://localhost:4000/users 500 (Internal Server Error)
SignUp.js:26
Response {type: 'basic', url: 'http://localhost:4000/users', redirected: false, status: 500, ok: false, …} body: (...) body Used: true headers: Headers {} ok: false redirected: false status: 500 statusText: "Internal Server Error" type: "basic" url: "http://localhost:4000/users" [[Prototype]]: Response
When trying to access localhost
GET http://localhost:3000/me 500 (Internal Server Error)
favicon.ico:1 GET http://localhost:3000/favicon.ico 500 (Internal Server Error)
Rails Server:
ArgumentError (wrong number of arguments (given 0, expected 1..2)):
app/controllers/users_controller.rb:2:in `<class:UsersController>'
app/controllers/users_controller.rb:1:in `<main>'
Started POST "/users" for 127.0.0.1 at 2022-11-02 23:09:07 -0400
ArgumentError (wrong number of arguments (given 0, expected 1..2)):
app/controllers/users_controller.rb:2:in `<class:UsersController>'
app/controllers/users_controller.rb:1:in `<main>'
React front end
import React from 'react';
import { useState } from "react";
function SignUp() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
function handleSignUp(e) {
e.preventDefault()
const user = {
username,
password
}
fetch("/users",{
method: "POST",
header: {
"Content-Type" : "application/json"
},
body: JSON.stringify(user)
}).then(r => {
r.json()
console.log(r)})
}
return (
<div>
<form onSubmit={handleSignUp}>
<p>Username</p>
<input
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<p>Password</p>
<input
type="text"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">Sign Up</button>
</form>
</div>
);
}
export default SignUp;
Routes
Rails.application.routes.draw do
# Routing logic: fallback requests for React Router.
# Leave this here to help deploy your app later!
post "/login", to: "sessions#create"
delete "logout", to: "sessions#destroy"
get "/me", to: "users#show"
post "/users", to: "users#create"
get "*path", to: "fallback#index", constraints: ->(req) { !req.xhr? && req.format.html? }
end
Controller
class UsersController < ApplicationController
wrap_parameters
rescue_from ActiveRecord:RecordInvalid, with: :record_invalid_response
def create
user = User.create!(user_params)
render json: user, status: :created
rescue ActiveRecord::RecordInvalid => invalid
end
def show
user = User.find(session[:user_id])
if user
render json: user
else
render json: { error: "Not authorized" }, status: :unauthorized
end
end
private
def user_params
params.permit(:username, :password)
# :first_name, :last_name, :phone_number, :email
end
def record_invalid_response(user)
render json: {error: user.errors.full_messages}, status: :unprocessable_entity
end
end

Answer 1

:The error comes from the fact that wrap_parameters expects some arguments, see https://api.rubyonrails.org/classes/ActionController/ParamsWrapper.html.
Now, for a JSON request, you don't need to call this function as Rails does it by default. But then I suppose Rails wraps your params with a user key and so you need to change your params processing, something like this should work:
class UsersController < ApplicationController
rescue_from ActiveRecord::RecordInvalid, with: :record_invalid_response
def create
user = User.create!(user_params)
render json: user, status: :created
end
def show
user = User.find(session[:user_id])
if user
render json: user
else
render json: { error: "Not authorized" }, status: :unauthorized
end
end
private
def user_params
params.require(:user).permit(:username, :password)
# :first_name, :last_name, :phone_number, :email
end
def record_invalid_response(user)
render json: {error: user.errors.full_messages}, status: :unprocessable_entity
end
end
Note: I also removed the rescue from the create action as it would prevent your controller-level rescue_from from being used