Unable to post to PHP server via Axios in React Native

Question

I am unable to post data to the PHP server. I am using Axios .

I can post successfully using Postman, but I can't from my React Native application.

What am I doing wrong?

<TouchableOpacity
  style={{ fontSize: 18, color: 'white' }}
  containerStyle={{
    padding: 8,
    marginLeft: 70,
    marginRight: 70,
    height: 40,
    borderRadius: 6,
    backgroundColor: 'mediumseagreen'
  }}
  onPress={() => {

    axios.post('url', {
      "Reason": this.state.newTodo,
      "BranchRef": this.props.branch,
      "AppointmentDate": this.props.date,
      "ToSeeRef": 369,
      "PatientRef": 63,
      "AppointmentTimeID": this.props.appointmentTime,
      "AppointmentPlatform": 2,
      "Completed": 0
    }, {
      "headers": {
      "Accept": 'application/json',
      'Content-Type': 'application/json',
    }
  }).then((response) => {
    console.log("reactNativeDemo", "response get 
                                      details:" + response.data);
  })
  .catch((error) => {
    console.log("axios error:", error);
  });
  }}
>

See error message below

axios error: [Error: Request failed with status code 500]

Answer 1

https://postman-echo.com/ - use postman echo to check if there is problem with your client or with the server. It might be a server problem, not from you:-/

Answer 2

Do not enter the Axios function in the render, separate it in different functions and the 'url' variable do you define it as global or inside render?

try:

postData = async () => {
 axios.post ('your url', {
   "Reason": this.state.newTodo,
   "BranchRef": this.props.branch,
   "AppointmentDate": this.props.date,
   "ToSeeRef": 369,
   "PatientRef": 63,
   "AppointmentTimeID": this.props.appointmentTime,
   "AppointmentPlatform": 2,
   "Completed": 0
 }, {
   "headers": {
     "Accept": 'application / json',
     'Content-Type': 'application / json',
   }
 }). then ((response) => {
   console.log ("reactNativeDemo", "response get
                                      details: "+ response.data);
 })
 .catch ((error) => {
   console.log ("axios error:", error);
 });
}

then on

onPress = {this.postData}

Answer 3

After checking my php/webserver logs, I was able to resolve this by changing the date format on my app.

I am using react-native-datepicker and the date format was different from what the server was expecting.

    <DatePicker
                    date={this.state.date}
                    mode="date"
                    format="YYYY-MM-DD"
                    confirmBtnText="Confirm"
                    cancelBtnText="Cancel"
                    customStyles={{
                        dateIcon: {
                            position: 'absolute',
                            left: 0,
                            top: 4,
                            marginLeft: 0
                        },
                        dateInput: {
                            marginLeft: 36,
                            borderWidth: 0,
                            right: 0,
                            color: "grey"
                        }
                    }}
                    onDateChange={(date) => { this.setState({ date: 
                    date }); }}
                />