onSubmitted not working with functions

[nats12]

Hi

I'm trying to redirect the user to a thank you page based on whether the status flag is "success" or not. Unf the status is unknown at the time of clicking the submit link/button so I can't add the path as so what I've thought of doing is adding onSubmitted on the rendered CustomForm and calling a simple function that will check the status and take the user to a different route (using react router history.push). The function isn't being hit at all though yet when I instead swap it out for a console.log it works.

<MailchimpSubscribe
      url={url}
      render={({ subscribe, status, message }) => (
      <>
       <CustomForm 
         status={status}
         message={message}
         onValidated={formData => subscribe(formData)}
         onSubmitted={back}
       />
    </>
)} />

const back = () => { history.push("/thank-you") };

Any ideas?

Cheers!

[revolunet]

Hi, i dont know what is history.push. what about document.location.href="/thank-you"; ?

[nats12]

Hi, history.push is taken from react router's useHistory() - it allows you to programatically set the next route. Unf no luck, I've tried document.location.href="/thank-you"; however it kept re-rendering the component non-stop after hitting the submit button. Plus my issue was more over the fact that onSubmitted={console.log('test')} works but onSubmitted={doSomething} doesn't even if doSomething is only just console logging.

[revolunet]

strange ! if you get a repro on codesandbox.io or something i'll have a look

[sarahesbie]

I realise this is a very old issue, but this is a solution that is working for me - I added a useEffect hook inside of the customForm component just to run the redirect.

useEffect(() => {
            if (status === "success") {
                history.push("/thankyou");
            }
        }, [status, history]);