score:0
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.
Source: stackoverflow.com
Related Query
- Adding complete Stripe payment requirement to form
- Stripe custom payment flow isn't showing checkout form in React.js
- Stripe custom form with Reactjs
- Dynamically adding Input form field issue reactjs
- Stripe payment method. Use card [split-form] not working. Can't get card number expiry and cvc number
- Adding Marketo Form to Gatsby/JSX
- Redux form - adding dynamically prop name to FormSection
- Integrating Stripe payment in React js
- Adding custom prop to RadioGroup field with React Final Form
- Adding cardholder name in Stripe
- Convenient way to mark a complete form as readonly
- Dynamically adding or removing items within a react-hook-forms form and registering the inputs?
- React-Hook-Form - adding icon inside input when form validation goes wrong
- Adding debounce to react hook form
- Stripe - Accept a payment throws integration error
- Firestore Security rules with payment form
- Stripe Elements, input validation upon form submit
- Creating test payment gateway with react and stripe
- Adding own CardHolder name in stripe
- Passing data from a react form to expressJS and also redirecting to the PayuMoney website to make payment
- Creating a custom Stripe form with React
- Programmatically adding handlers to react form handler
- Adding class to result element when submitting form [React.js]
- API Symfony 4 / Reactjs / Paybox - submit a form from back side and send its redirection to front side for payment
- How to clear all form values on success in stripe (React)?
- Accept custom payment in Stripe Checkout
- Adding new options to form on click in ReactJs
- Best practice for adding a history subcollection upon submitting the form without cloud functions
- Adding Properties boxes on the spot inside a form tag
- React Form reload page after adding Style
More Query from same tag
- react - useState never update the value
- Cannot use this.props or set this.state in function outside Render
- why is that there is a dark area around the buttons when they are tapped on mobile devices
- How To Count Number of Documents in a Collection in Firebase Firestore With a WHERE query in react.js
- For a React + TypeScript variable: enforce some attributes in the "props" of a component
- Cannot GET etc with Nginx Reverse Proxy React + Node + PM2
- Resetting React Form values after validation
- React state (hook) resets on re-render while using switch
- How to start and stop both the webcam stream and microphone in React JSX using WebRTC?
- Animate a page alone (Appear, Enter and Leave) with ReactTransitionGroup
- React hooks - Dynamically adding and deleting component. Delete problem
- How could I understand 'primary' in <Button primary></Button>?
- getting render error like nothing was returned from render
- How to handle the dependent array in useEffect
- Send variables from one class to routes.js (without props)
- React child component not updating when props change
- Meteor call method use the return value
- How can I configure React router correctly to navigate to a new page?
- Styling components and react-bootstrap
- How to assign types of (typeof) all elements in the object to a variable in JavaScript | Typescript?
- React - typescript TypeScript error: This expression is not callable
- How do you pass different props to different child components in a parent component?
- localeCompare array of objects sorting not working
- Check all weekends dynamically from api data using moment.js in react
- React Hooks in combination with Firebase data not showing on page load
- Static propTypes not working under ES6
- Change TextInput Style on Focus React Native Paper
- How to check one of my object value is empty or not
- Can you use map function within a class React
- React state is called before receiving value from API