score:0

Accepted answer

not sure how your button component is composed, but couldn't you just pass it a prop of disabled={!this.state.complete}?

edit: misunderstood the structure of the components. that will still work though, however you'll need to raise the state indicating completion up out of your form component into the fulfillrequest component so it can access it. your state for fulfillrequest should look something like:

state = {
    open: false,
    body: '',
    errors: {},
    complete: false,
  };

then you can create a function which sets the value in that parent and pass it to the child form:

  setcomplete = (val) => {
    this.setstate({
      complete: val
    })
  }

...

<checkoutform setcomplete={this.setcomplete} complete={this.state.complete}/>

then call the passed function to set the complete state when the form resolves with success:

  async submit(ev) {
    let { token } = await this.props.stripe.createtoken({ name: 'name' });
    let response = await fetch(
      'https://us-east1-foodmigo-v01-101.cloudfunctions.net/api/charge',
      {
        method: 'post',
        headers: { 'content-type': 'text/plain' },
        body: token.id
      }
    );
    if (response.ok) this.props.setcomplete(true);
  }

lastly, set the disabled prop on your button in the parent based on the result (and replace any other instances of this.state.complete with the complete prop in the checkoutform as well, if necessary):

<button type="submit" color="primary" disabled={loading || !this.state.complete}>
                  fulfill request
                  {loading && <circularprogress />}
                </button>

can't test this but it should work.


Related Query

More Query from same tag