Reactjs Passing props down 2 components

Question

In my project I have a payment form which conditionally renders 2 Stripe elements (PaymentRequestForm.js & CheckoutForm.js), I have passed the Props down from the main form component FullfillRequest.js to PaymentRequestForm.js, however I'm struggling with passing the same props down to CheckoutForm.js. The function of the props is to enable submit of the form upon Stripe payment is completion.

With the current set-up, the error is this.props.setComplete() is undefined in CheckoutForm.js.

FulfillRequest.js

  setComplete = val => {
    this.setState({
      complete: val
    });
  };

 render() {
return <PaymentRequestForm
setComplete={this.setComplete}
complete={this.state.complete}
requestId={this.props.requestId}
/>

  <Button disabled={loading || !this.state.complete} >
 Fulfill Request
</Button>
}

PaymentRequestForm.js

class PaymentRequestForm extends React.Component {
  constructor(props) {
    super(props);

   paymentRequest.on("token", async ev => {
      const response = await fetch();
      if (response.ok) {
            this.props.setComplete(true);
      } 
    });

    this.state = {
      canMakePayment: false,
      paymentRequest,
      complete: false
    };
  }

  render() {
    if (this.props.complete) return <h1>Purchase Complete</h1>;
     return this.state.canMakePayment ? (
      <PaymentRequestButtonElement />
    ) : (
      <CheckoutForm
        setComplete={this.setComplete}
        complete={this.state.complete}
        requestId={this.props.requestId}
      />
    );

CheckoutForm.js

class CheckoutForm extends Component {
  constructor(props) {
    super(props);
    this.state = { complete: false };
    this.submit = this.submit.bind(this);
  }
  async submit(ev) {
    let response = await fetch();
    if (response.ok) {
      this.props.setComplete(true);
       }
  }

  render() {
    if (this.props.complete) return <h1>Purchase Complete</h1>;
    return (
           <Button onClick={this.submit}>
            Send
          </Button>
       );
  }
}

Any help will be greatly appreciated, thanks!

Answer 1

Inside PaymentRequstForm setComplete is accessible via this.props.setComplete not this.setComplete (cause it's coming from FulfillRequest )

  render() {
    if (this.props.complete) return <h1>Purchase Complete</h1>;
     return this.state.canMakePayment ? (
      <PaymentRequestButtonElement />
    ) : (
      <CheckoutForm
        setComplete={this.props.setComplete}
        complete={this.state.complete}
        requestId={this.props.requestId}
      />
    );