1

I am using the react-paypal-express-checkout element. There is a method for passing functions on successful payment. In this method, I want to make an axios.post where in I pass data to a server.

The data is in the state of the parent component, and is passed like so:

<Pay value={this.state.value} />

My axios.post in the child (<Pay />) element is:

export default class Pay extends React.Component {
  render() {
    const onSuccess = payment => {
      axios.post(
        "http://localhost:3000/updateValue", {this.props.value}
      );
    };
    return (
      <div>
        <PaypalExpressBtn
          onSuccess={onSuccess}  
        />
      </div>
    );
  }
}

The error given for this.props.value is that this is a reserved word. I assume that this is not bound properly, but I don't know how to do it. Any help is appreciated!

Hanley Soilsmith
  • 579
  • 2
  • 9
  • 27

1 Answers1

2

The problem isn't related to function binding. onSuccess is an arrow, it cannot and shouldn't be bound. {this.props.value} is incorrect syntax for object literal.

In case value contains data that should be posted, it should be:

  axios.post(
    "http://localhost:3000/updateValue", {data: this.props.value}
  );
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • Thank you, I see what happened. Follow up question if you have a moment... How will should my server receive this new value? If you could even give me some key words I will do the research, just think I am not asking google correctly. Thanks!!! – Hanley Soilsmith Dec 11 '18 at 08:06
  • 1
    `/updateValue` API endpoint should receive it as *POST parameters*, likely in JSON format. In case you're using Express, it's something like https://stackoverflow.com/questions/5710358/how-to-retrieve-post-query-parameters – Estus Flask Dec 11 '18 at 08:09