I'm trying to make an API call and redirect a page upon form submission using React. Here's some qualities of the issue I'm running into:
I've removed the API code as it's irrelevant for this question:
const Booking = () => {
const handleSubmit = () => {
window.parent.location = '/intuit-app/thankyou';}
return (
<>
<Container>
<FormWrap>
<Icon to="/intuit-app">Intuit</Icon>
<FormContent>
<Form onSubmit={handleSubmit}>
<FormH1>Enter your email, then pick a date and time for your consultation</FormH1>
<FormLabel htmlFor='for'>Email</FormLabel>
<FormInput type='email' onChange={handleInputChange} required />
<FormButton type="submit" value="Submit"
>Submit</FormButton>
</Form>
</FormContent>
</FormWrap>
</Container>
</>
)
}
You forgot to prevent the default behavior of the browser.
const handleSubmit = (event) => {
event.preventDefault();
window.parent.location = '/intuit-app/thankyou';
}