React Ajax 400 Bad Request on Rails-React - ajax

Question

I am trying to send some data over \appointments via POST request on my handleFormSubmit function. But for some reason I am always getting a 400 Bad Request Error:
Here's my Appointments.jsx file:
import React from 'react';
import Appointment from './Appointment';
import AppointmentForm from './AppointmentForm';
import AppointmentsList from './AppointmentsList';
class Appointments extends React.Component {
constructor(props) {
super(props)
this.state = {
appointments: this.props.appointments,
title: 'Put your event title',
appointment_date: 'When would this happen?'
};
this.handleUserInput = this.handleUserInput.bind(this)
}
handleUserInput(obj_value){
this.setState(obj_value);
}
handleFormSubmit(){
let apppointment = {
title: this.state.title,
appointment_date: this.state.appointment_date
};
$.ajax({
type: "POST",
url: '/appointments',
data: { apppointment },
success: function(data){
console.log(data);
}
});
}
render(){
return(
<div>
<AppointmentForm title={this.state.title}
appointment_date={this.state.appointment_date}
onUserInput={this.handleUserInput}
onFormSubmit={this.handleFormSubmit}
/>
<AppointmentsList appointments={this.props.appointments} />
</div>
)
}
}
export default Appointments;
I am not sure yet but I think it has to do something with this code:
$.ajax({
type: "POST",
url: '/appointments',
data: { apppointment },
success: function(data){
console.log(data);
}
});
Any idea what do i need to do in order to fix this?

Answer 1

On the network tab, you must select the post request and then go to the parameters you are sending and check if you are sending the data and if it is the right structure.
This is how it looks like on Chrome there is where you check the data you are sending
Try modifying your handleFormSubmit
handleFormSubmit() {
let apppointment = JSON.stringify({
title: this.state.title,
appointment_date: this.state.appointment_date
})
$.ajax({
url: '/appointments',
type: "POST",
data: apppointment,
contentType: 'application/json'
})
}

Answer 2

meaby you can try with axios instance ajax